@import '~sass-flex-mixins/src/sass-flex-mixins.scss';
@import '../utils/theme/variables.scss';
$background: $brc-gradientGrey !default;
$background-hover: $brc-gradientDarkGrey !default;
$background-open: $brc-gradientDarkGrey !default;
$border-color: $brc-silver !default;
$border-color-hover: $border-color !default;
$border-color-open: $brc-waterBlue !default;
$border-color-focus: $brc-waterBlue !default;
$border-radius: 2px !default;
$text-color: $brc-coolGrey !default;
$text-color-open: $brc-coolGrey !default;
$text-color-has-value: $brc-darkGreyBlue !default;
$text-color-hover: $text-color-has-value !default;
$text-color-writing: $brc-coolGrey !default;
$placeholder-color: $brc-coolGrey !default;
$placeholder-color-hover: $brc-coolGrey !default;
$placeholder-color-open: $brc-coolGrey !default;
$arrow-color: $text-color !default;
$arrow-color-hover: $text-color !default;
$arrow-color-open: $text-color-open !default;
$x-color: $text-color !default;
$x-color-hover: $brc-red !default;
$menu-background: $brc-white !default;
$menu-border-color: $brc-silver !default;
$option-group-color: $brc-darkGreyBlue !default;
$option-group-background: $brc-paleGrey !default;
$option-color: rgba($brc-darkGreyBlue, 0.5) !default;
$option-color-hover: $brc-darkGreyBlue !default;
$option-color-selected: $option-color !default;
$option-color-disabled: rgba($option-color, 0.2) !default;
$option-background-hover: rgba($brc-azure, 0.15) !default;
$option-background-selected: $menu-background !default;
$option-background-disabled: $menu-background !default;
$multiple-value-color: $brc-azure !default;
$multiple-value-border-color: $multiple-value-color !default;
$multiple-value-background-color: $brc-duckBlue !default;
$multiple-value-icon-color: $multiple-value-color !default;
$multiple-value-icon-background-color: $multiple-value-background-color !default;
$multiple-value-icon-border-color: $multiple-value-icon-color !default;
$multiple-value-icon-color-hover: $brc-red !default;
$multiple-value-icon-background-color-hover: darken(
  $multiple-value-icon-background-color,
  10%
) !default;
$multiple-value-icon-border-color-hover: $multiple-value-icon-border-color !default;
$disabled-opacity: 0.6 !default;
$height: 36px !default;
$height-small: 30px !default;
$padding-left-small: 10px !default;
$padding-left: 10px !default;

// NORMALIZE
@mixin normalize {
  margin: 0;
  padding: 0;

  @include display_flex();
  @include flex_flex-direction(row);
  @include flex_align-items(center);
}

@mixin height($height) {
  height: $height;
  line-height: $height;
}

.dropdown {
  box-sizing: border-box;

  @include normalize();
  @include height($height);

  .dropdown__control,
  .dropdown__value-container,
  .dropdown__placeholder,
  .dropdown__input,
  .dropdown__input > input,
  .dropdown__option,
  .dropdown__dropdown-indicator {
    @include normalize();
    @include height($height);
  }

  &.is-small {
    @include height($height-small);

    .dropdown__control,
    .dropdown__value-container,
    .dropdown__placeholder,
    .dropdown__input,
    .dropdown__input > input,
    .dropdown__option,
    .dropdown__dropdown-indicator {
      @include height($height-small);
    }
  }
}

.dropdown {
  &:hover {
    .dropdown__control {
      border-color: $border-color-hover;
    }
  }

  &:not(.dropdown--is-disabled) {
    .dropdown__control--is-focused {
      border-color: $border-color-focus;
    }
  }

  &.is-small {
    .dropdown__control {
      padding-left: $padding-left-small;
    }
  }

  color: $text-color;

  .dropdown__control {
    padding-left: $padding-left;
    cursor: pointer;
    box-shadow: none !important;
    min-width: 150px;
    min-height: unset;
    width: 100%;
    border: solid 1px $border-color;
    border-radius: $border-radius;
    background: $background;
    font-size: 15px;
    font-weight: $brc-semibold;

    .dropdown__value-container,
    .dropdown__multi-value__label {
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .dropdown__value-container {
      @include flex_flex-wrap(wrap);
      @include flex_align-items(center);
    }

    .dropdown__input {
      position: absolute;
      top: 0;
      left: 0;
      background: transparent;
    }

    .dropdown__dropdown-indicator,
    .dropdown__clear-indicator {
      @include flex_flex(0 0 auto);
      @include flex_justify-content(center);
    }

    .dropdown__dropdown-indicator {
      height: 100%;
      width: 30px;
      svg {
        fill: $arrow-color;
      }
    }

    .dropdown__dropdown-indicator,
    .dropdown__clear-indicator {
      margin: 0;
      padding: 0;
      cursor: pointer;
    }
  }

  .dropdown__placeholder {
    font-weight: $brc-semibold;
    color: $placeholder-color;
  }

  .dropdown__menu {
    position: absolute;
    left: 0;
    z-index: 1000;
    margin-top: 10px;
    border: solid 1px $menu-border-color;
    border-radius: 4px;
    min-width: 185px;
    background-color: $menu-background;
    box-shadow: rgba(34, 36, 38, 0.12) 0 2px 4px 0;

    .dropdown__menu-list {
      padding: 0;

      .dropdown__group {
        padding: 0;

        .dropdown__group-heading {
          margin: 0;
          padding: 0 9px;
          font-size: 15px;
          font-weight: $brc-semibold;
          color: $option-group-color;
          background: $option-group-background;
        }
      }

      .dropdown__option {
        padding: 0 10px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 400;
        color: $option-color;
        background: $menu-background;

        &.dropdown__option--is-selected {
          background: $option-background-selected;
          color: $option-color-selected;
        }

        &.dropdown__option--is-disabled {
          color: $option-color-disabled;
          background: $option-background-disabled;
        }

        &:not(.dropdown__option--is-disabled):hover,
        &.dropdown__option--is-focused {
          background: $option-background-hover;
          color: $option-color-hover;
        }
      }
    }
  }

  &.is-multi {
    height: auto;

    .dropdown__control {
      height: auto;

      .dropdown__value-container {
        min-height: $height - 2;
        height: auto;
      }
    }

    &.is-small {
      .dropdown__value-container {
        min-height: $height-small - 2;
      }
    }

    .dropdown__value-container--has-value {
      min-height: auto;

      .dropdown__input {
        position: relative;

        @include height($height - 12px);

        > input {
          @include height($height - 12px);
        }
      }

      .dropdown__multi-value {
        margin-right: 5px;
        border: 1px solid $multiple-value-border-color;

        @include height($height - 12px);

        .dropdown__multi-value__label {
          @include height($height - 14px);

          background: $multiple-value-background-color;
          color: $multiple-value-color;
          padding-top: 0;
          padding-bottom: 0;
        }

        .dropdown__multi-value__remove {
          padding: 0 4px;
          border-color: $multiple-value-icon-border-color;
          background: $multiple-value-icon-background-color;
          color: $multiple-value-icon-color;
          cursor: pointer;

          &:hover {
            border-color: $multiple-value-icon-border-color-hover;
            background: $multiple-value-icon-background-color-hover;
            color: $multiple-value-icon-color-hover;
          }
        }
      }

      &.is-small {
        .dropdown__control .dropdown__value-container {
          min-height: auto;

          .dropdown__input,
          .dropdown__input > input {
            @include height($height-small - 12px);
          }

          .dropdown__multi-value {
            @include height($height-small - 14px);

            .dropdown__multi-value__label {
              @include height($height-small - 14px);
            }
          }
        }
      }
    }
  }

  &:not(.dropdown--is-disabled) {
    .dropdown__control {
      &:hover {
        background: $background-hover;

        .dropdown__single-value {
          color: $text-color-hover;
        }

        .dropdown__placeholder {
          color: $placeholder-color-hover;
        }

        .dropdown__dropdown-indicator svg {
          fill: $arrow-color-hover;
        }
      }

      &.dropdown__control--menu-is-open {
        border-color: $border-color-open;
        background: $background-open;

        .dropdown__single-value {
          color: $text-color-open;
        }

        .dropdown__placeholder:hover,
        .dropdown__placeholder {
          color: $placeholder-color-open;
        }

        .dropdown__dropdown-indicator svg {
          fill: $arrow-color-open;
        }
      }
    }
  }

  .dropdown__value-container--has-value {
    .dropdown__single-value {
      color: $text-color-has-value;
    }
  }

  .dropdown__clear-indicator {
    svg {
      bottom: 0;
      padding: 0;
      fill: $x-color;
    }

    &:hover {
      svg {
        fill: $x-color-hover;
      }
    }
  }

  &.is-searchable {
    .dropdown__control {
      cursor: text;

      .dropdown__input {
        color: $text-color-writing;
      }
    }
  }

  &.dropdown--is-disabled {
    cursor: not-allowed;
    opacity: $disabled-opacity;

    .dropdown__dropdown-indicator,
    .dropdown__control {
      cursor: inherit;
    }
  }

  &.is-flat {
    &:not(:hover),
    &.dropdown--is-disabled {
      :not(.dropdown__control--menu-is-open) {
        background: transparent;
      }
    }
  }
}
