@import '../../constants/styles';

.Dropdown {
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  font-size: 14px;
  user-select: none;
  justify-content: space-between;
  margin-bottom: 5px;
  z-index: 80;
  
  .items {
    flex-grow: 1;
    position: relative;
    
    .display-item {
      height: 24px;
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .dropdown-items {
      position: absolute;
      top: 27px;
      width: 100%;

      &.show {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
  
      &.hide {
        display: none;
      }

      .dropdown-item {
        margin: 5px 0;
      }
    }

    &:hover {
      cursor: pointer;
    }
  }

  &:after {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;

    content: '\25BE';
    color: #757575;
    color: var(--icon-color);
  }

  &:hover:after {
    cursor: pointer;
  }
}