/** @component select */

@include exports('md-select') {
  .#{$select__class} {
    .md-input__wrapper {
      line-height: 0;
    }

    .md-input__after {
      pointer-events: none;
    }

    .md-rotate {
      transform: rotate(0);
      transition: transform ease 0.15s;
    }

    .open {
      .md-rotate {
        transform: rotate(180deg);
      }
    }

    &__input,
    .#{$select-button__class} {
      width: 100%;
      @include button-color(
        $color: $select__color,
        $color-css-var: --md-button-secondary-text-color,
        $color-hover: $select__color,
        $color-hover-css-var: --md-button-secondary-text-color,
        $color-active: $select__color,
        $color-active-css-var: --md-button-secondary-text-color,
        $bg: $select--input__background-color,
        $bg-css-var: --md-button-secondary-bg-color,
        $bg-hover: $select--input__background-color--hover,
        $bg-hover-css-var: --md-button-secondary-hover-bg-color,
        $bg-active: $select--input__background-color,
        $bg-active-css-var: --md-button-secondary-pressed-bg-color,
      );
      @include button-size($radius: $input__border-radius);
      text-align: left;

      margin: $select-input__margin;
      min-width: rem-calc(180);

      .#{$dark-class} & {
        @include button-color(
          $color: $select__color--dark,
          $bg: $select--input__background-color--dark,
          $bg-hover: $select--input__background-color--hover--dark,
          $bg-active: $select--input__background-color--dark
        );
        @include button-size($radius: $input__border-radius);
      }

      &.disabled,
      &.md-button--disabled,
      &[disabled] {
        @include border-radius($input__border-radius);

        .#{$select-label__class} {
          @include flex($jc: space-between);

          > i,
          > .#{$icon__class} {
            color: $select__icon--disabled;
            color: var(--md-textColor-disabled, $select__icon--disabled);

            path {
              fill: $select__icon--disabled;
              fill: var(--md-textColor-disabled, $select__icon--disabled);
            }

            .#{$dark-class} & {
              color: $select__icon--disabled--dark;

              path {
                fill: $select__icon--disabled--dark;
              }
            }
          }
        }
      }

      .#{$select-label__class} {
        width: 100%;
        @include flex($jc: space-between);

        > span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: rem-calc(250);
        }

        > i,
        > .#{$icon__class} {
          color: $input__font-color;
          color: var(--md-button-secondary-text-color, $input__font-color);

          path {
            fill: $input__font-color;
            fill: var(--md-button-secondary-text-color, $input__font-color);
          }

          .#{$dark-class} & {
            color: $input__font-color--dark;

            path {
              fill: $input__font-color--dark;
            }
          }
        }
      }
    }
    .#{$prefix}-event-overlay__children {
      background: $md-white-100;
      background: var(--md-background-secondary, $md-white-100);
      max-height: $dropdown-height;
      overflow: auto;
      border: $select--children__border;
      box-shadow: $select--children__box-shadow;

      .#{$list-item__class} {
        .#{$dark-class} & {
          @include list-item-color;
        }
      }
      // One pixel less than Event Overlay per Designers comments
      .#{$list-item__class}:first-of-type {
        border-radius: 4px 4px 0 0;
      }

      .#{$list-item__class}:last-of-type {
        border-radius: 0 0 4px 4px;
      }
    }

  }

  .#{$select__class}__dropdown {
    background: $md-white-100;
    border-radius: $event-overlay__border-radius;
    box-shadow: $event-overlay__border, $event-overlay__shadow;
    display: flex;
    flex-direction: column;
  }

  .md-select__filter {
    padding: rem-calc(12) rem-calc(12) 0 rem-calc(12);
    &--empty {
      list-style-type: none;
      padding: .5rem;
      margin-left: rem-calc(12);
    }
  }

  .md-select__filter {
    .md-input-container{
      margin-bottom: rem-calc(4);
      width: 100%;
    }
  }
}