$size-button-close: 1.25rem;
$height-form-tag: point(4);
$line-height-form-fixed: 31px;
$height-form-size-border: 36px;

$ignore-icon-width: strip-unit($size-button-close) + strip-unit($spacing-margin-xxsmall) + rem;

.select-fade {
  &-enter,
  &-leave-to {
    max-height: 0 !important;
    padding: {
      top: 0;
      bottom: 0;
    }
    opacity: 0;
  }
  &-enter-active {
    overflow-y: hidden !important;
    transition: max-height $transition-sm-medium $transition-easing-default,
                padding $transition-sm-medium $transition-easing-default,
                opacity $transition-sm-fast $transition-easing-default;
  }
  &-leave-active {
    overflow-y: hidden !important;
    transition: max-height $transition-sm-fast $transition-easing-default,
                padding $transition-sm-medium $transition-easing-default,
                opacity $transition-sm-medium $transition-easing-default;
  }
}
.tao__form-group-dropdown {
  &.dropdown-open {
    .tao__form-input-multiple {
      .form__selected-tag {
        color: $color-text-01;
      }
    }
  }
}

.form__selected-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - #{$ignore-icon-width});
  padding-top: 1px;
}

.tao__form-group-dropdown {
  z-index: inherit;
  .form__selected-tag {
    position: absolute;
    left: calc(#{$spacing-margin-xxsmall} + 2px);
    line-height: $height-form-size-border;
    font-weight: $font-weight-medium;
    color: $color-text-01;
    transition: color $transition-sm-fast $transition-easing-default;
    pointer-events: none;
  }
  .tao__form-input {
    transition-property: border-radius, border-color, box-shadow;
    .tao__input {
      padding-right: 0;
    }
  }
  &.dropdown-open {
    .tao__form-input {
      border-radius: $border-radius-normal $border-radius-normal 0 0;
      border-color: $color-brand-darker;
      border-bottom-color: rgba($color-ui-darker, $opacity-low-minimum);
      box-shadow: $box-shadow-button-width rgba($color-brand-darker, $opacity-low-maximum);
    }
    .form__selected-tag {
      color: rgba($color-text-01, $opacity-low-maximum);
    }
    .icon__form.show-icon {
      transform: rotate(270deg);
    }
    .tao__form-label {
      color: $color-brand-darker;
    }
  }
  .icon__form.show-icon {
    transition: transform $transition-sm-medium $transition-easing-default;
    transform: rotate(90deg);
    &:hover, &:focus {
      background: $color-ui-transparent;
    }
  }
}

.tao__form-dropdown {
  z-index: 10;
  top: calc(100% - 1px);
  border-radius: 0 0 $border-radius-normal $border-radius-normal;
  border: $border-width-default solid $color-brand-darker;
  border-top: $color-ui-transparent;
  max-height: point(25);
  overflow-y: auto;
  .form__list {
    &--li {
      .form__selected-list {
        background: rgba($color-brand-darker, $opacity-low-minimum);
        &:hover, &.selected {
          background: rgba($color-brand-darker, $opacity-low-half);
        }
      }
      &:hover, &.selected {
        background: rgba($color-ui-darker, $opacity-low-minimum);
      }
    }
  }
}

.tao__form-input-multiple {
  flex-wrap: wrap;
  .form__selected-tag {
    position: relative;
    border: $color-text-03 solid $border-width-thin;
    border-radius: $border-radius-circle;
    font-size: $font-size-small;
    left: 0;
    bottom: initial;
    height: $height-form-tag;
    pointer-events: all;
    background: $color-ui-lighter;
    margin: $spacing-margin-xxxxsmall;
    line-height: $line-height-form-fixed;
  }
  .form__selected-close {
    background: $color-text-03;
    font-size: 1.05rem;
    font-weight: 300;
    width: $size-button-close;
    height: $size-button-close;
    min-width: $size-button-close;
    min-height: $size-button-close;
    transition: opacity $transition-sm-fast $transition-easing-default;
    &:hover {
      opacity: $opacity-full;
    }
    span {
      line-height: $size-button-close;
    }
  }
  .form__selected-selected {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: bottom;
  }
  .tao__input {
    width: auto;
  }
  .icon__form {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}