//-----------------------------
// Dropdown
//-----------------------------

@import '../../globals/scss/colors';
@import '../../globals/scss/vars';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/layer';
@import '../../globals/scss/typography';
@import '../../globals/scss/spacing';
@import '../../globals/scss/import-once';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/css--typography';
@import '../../globals/scss/layout';

@include exports('dropdown') {
  .#{$prefix}--dropdown {
    @include reset;
    @include font-family;
    @include typescale('zeta');
    position: relative;
    list-style: none;
    display: block;
    background-color: $field-01;
    width: 100%;
    height: rem(40px);
    cursor: pointer;
    color: $text-01;

    &:focus {
      @include focus-outline('border');
    }

    &.#{$prefix}--dropdown--open:focus {
      outline: 1px solid transparent;
      box-shadow: 0 -1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01;
    }
  }

  .#{$prefix}--dropdown__arrow {
    fill: $brand-01;
    position: absolute;
    right: 1rem;
    top: 1.175rem;
    width: rem(10px);
    height: rem(5px);
    pointer-events: none;
    transition: transform $transition--expansion $carbon--standard-easing;
    transform-origin: 50% 45%;
  }

  .#{$prefix}--dropdown[data-value=''] .#{$prefix}--dropdown-text {
    color: $text-03;
  }

  .#{$prefix}--dropdown-text {
    height: rem(40px);
    padding-top: rem(13px);
    padding-bottom: rem(13px);
    padding-left: $spacing-md;
    padding-right: $spacing-2xl;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: $input-border;
  }

  .#{$prefix}--dropdown-list {
    @include reset;
    @include layer('overlay');
    @include typescale('zeta');
    background-color: $ui-01;
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
    position: absolute;
    z-index: z('dropdown');
    max-height: 0;
    transition: max-height $transition--expansion $carbon--ease-out;
    overflow: hidden;
  }

  .#{$prefix}--dropdown-item {
    transition: opacity $transition--expansion $carbon--ease-out;
    opacity: 0;
  }

  .#{$prefix}--dropdown-link {
    display: block;
    color: currentColor;
    text-decoration: none;
    padding: $spacing-md $spacing-lg $spacing-md $spacing-md;
    text-overflow: ellipsis;
    overflow: hidden;

    &:hover,
    &:focus {
      background-color: $brand-01;
      color: $inverse-01;
      outline: 1px solid transparent;
      text-decoration: underline;
    }
  }

  .#{$prefix}--dropdown--selected {
    display: none;
  }

  .#{$prefix}--dropdown--open {
    .#{$prefix}--dropdown__arrow {
      transform: rotate(-180deg);
    }

    .#{$prefix}--dropdown-list {
      max-height: 15rem;
      overflow: auto;
    }

    &:focus {
      .#{$prefix}--dropdown-list {
        box-shadow: 0 1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01;
      }
    }

    .#{$prefix}--dropdown-item {
      opacity: 1;
    }
  }

  .#{$prefix}--dropdown--disabled {
    opacity: 0.5;
    cursor: not-allowed;

    &:focus {
      outline: none;
    }
  }
}