@import '../../../assets/scss/constants/colors.scss';
@import '../../../assets/scss/base/mixins.scss';

.dropdown {
  position: relative;
  &-button {
    // border: 0.1px solid $sumo;
    // border-radius: 4px;
    // width: 100%;
    // line-height: 1.5;
    // color: $black;
    // padding: 0.35rem 0.35rem 1.45rem 0.35rem;
    // font-size: 12px;
    // background-color: $white;
    // text-align: left;
    // height: 21px;
    // display: flex;

    border: 0.1px solid $sumo;
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0px 6px;
    background: #ffffff;
    text-align: left;
    font-size: 12px;
    &-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 10px;
    }
  }

  .disabled {
    background-color: $whisper;
    border-color: $moonMist;
    color: $grey;
    opacity: 1;
    font-size: 12px;
    .cross {
      pointer-events: none;
      opacity: 0.4;
    }
  }

  &-icon {
    position: absolute;
    right: 7px;
    bottom: 8px;
    color: $deepteal;
  }

  .icon-container {
    .cross {
      @include crossIconButton(7px);
      right: 20px;
    }
  }

  &-content {
    width: 100%;
    font-size: 12px;
    background-color: $white;
    position: absolute;
    max-height: 150px;
    overflow: auto;
    z-index: 2;
    margin-top: 2px;
    box-shadow: 0px 3px 8px #666666;

    .dropdown-options {
      max-height: 110px;

      .option {
        display: block;
        padding: 5px;
        cursor: pointer;
        border-radius: 0;
        width: 100%;
        text-align: left;
        background: $white;
        &:hover {
          background-color: $lilyWhite;
          cursor: pointer;
        }
      }

      .active {
        background-color: $lilyWhite;
        outline: none;
      }
    }

    &-down {
      top: 100%;
    }

    &-up {
      bottom: 100%;
    }
  }
}