/* stylelint-disable selector-class-pattern */

$choices-selector: 'choices' !default;
$choices-font-size-lg: rem(16) !default;
$choices-font-size-md: rem(14) !default;
$choices-font-size-sm: rem(12) !default;
$choices-border-radius: rem(2.5) !default;
$choices-border-radius-item: rem(4) !default;
$choices-bg-color: $sui-color-brand-denim-200 !default;
$choices-bg-color-disabled: $sui-color-brand-denim-300 !default;
$choices-bg-color-dropdown: white !default;
$choices-text-color: $sui-color-text !default;
$choices-keyline-color: $sui-color-border !default;
$choices-primary-color: $sui-color-primary !default;
$choices-disabled-color: $sui-color-brand-denim-300 !default;
$choices-highlight-color: $choices-primary-color !default;
$choices-button-dimension: rem(8) !default;
$choices-button-offset: rem(8) !default;

.#{$choices-selector} {
  position: relative;
  font-size: $choices-font-size-lg;
  font-family: $sui-font-family-secondary;

  &:focus {
    outline: none;
  }

  &.is-disabled {
    .#{$choices-selector}__inner,
    .#{$choices-selector}__input {
      background-color: $choices-bg-color-disabled;
      cursor: not-allowed;
      user-select: none;
    }

    .#{$choices-selector}__item {
      cursor: not-allowed;

      button {
        display: none;
      }
    }
  }
}

.#{$choices-selector}[data-type*="select-one"] {
  cursor: pointer;

  .#{$choices-selector}__input {
    display: block;
    width: 100%;
    padding: rem(10);
    border-bottom: rem(1) solid $choices-keyline-color;
    background-color: $sui-color-brand-denim-100;
    margin: 0;
  }

  .#{$choices-selector}__button {
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: rem(-10);
    margin-right: rem(25);
    height: rem(20);
    width: rem(20);
    border-radius: 10em;
    opacity: .5;
    font-size: rem(20);

    &::after {
      line-height: rem(18);
    }

    &:hover,
    &:focus {
      opacity: 1;
    }

    &:focus {
      box-shadow: 0 0 0 rem(2) $choices-highlight-color;
    }
  }

  &::after {
    content: "";
    height: 0;
    width: 0;
    border: rem(5) solid transparent;
    border-top-color: $sui-color-primary;
    position: absolute;
    right: rem(11.5);
    top: 50%;
    margin-top: rem(-2.5);
    pointer-events: none;
  }

  &.is-open::after {
    border-color: transparent transparent $sui-color-primary transparent;
    margin-top: rem(-7.5);
  }

  &[dir="rtl"] {
    &::after {
      left: rem(11.5);
      right: auto;
    }

    .#{$choices-selector}__button {
      right: auto;
      left: 0;
      margin-left: rem(25);
      margin-right: 0;
    }
  }
}

.#{$choices-selector}[data-type*="select-multiple"],
.#{$choices-selector}[data-type*="text"] {
  .#{$choices-selector}__inner {
    cursor: text;
    padding-top: rem(3);
    padding-bottom: rem(3);
    padding-left: rem(3);
  }

  .#{$choices-selector}__button {
    position: relative;
    display: inline-block;
    margin-left: rem(5);
    margin-right: rem(-5);
    padding-left: $choices-button-offset*2;
    border-left: rem(1) solid darken($choices-primary-color, 10%);
    width: $choices-button-dimension;
    line-height: 1;
    opacity: .75;

    &:hover,
    &:focus {
      opacity: 1;
    }
  }
}

.#{$choices-selector}__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: rem(100);
  overflow: hidden;

  @include sui-a-form-control();

  padding-top: rem(6);
  padding-bottom: rem(6);

  .is-focused &,
  .is-open & {
    @include suiFocusEffect();

    border-color: $sui-color-primary;
    outline: 0;
  }

  .is-open & {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .is-flipped.is-open & {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.#{$choices-selector}__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.#{$choices-selector}__list--single {
  display: inline-block;
  padding: 0 1.5rem 0 0;
  width: 100%;

  [dir="rtl"] & {
    padding-right: 0;
    padding-left: 1.5rem;
  }

  .#{$choices-selector}__item {
    width: 100%;
  }
}

.#{$choices-selector}__list--multiple {
  display: inline;
  vertical-align: middle;

  .#{$choices-selector}__item {
    display: inline-block;
    vertical-align: top;
    border-radius: $choices-border-radius-item;
    padding: rem(2) rem(6);
    font-size: $choices-font-size-sm;
    font-weight: bold;
    margin: rem(2);
    background-color: $choices-primary-color;
    border: rem(1) solid darken($choices-primary-color, 5%);
    color: $sui-color-brand-denim-100;
    word-break: break-all;

    &[data-deletable] {
      padding-right: rem(5);
    }

    [dir="rtl"] & {
      margin-right: 0;
      margin-left: rem(3.75);
    }

    &.is-highlighted {
      background-color: darken($choices-primary-color, 5%);
      border: rem(1) solid darken($choices-primary-color, 10%);
    }

    .is-disabled & {
      opacity: .8;
    }
  }
}

.#{$choices-selector}__list--dropdown {
  display: none;
  z-index: 1;
  position: absolute;
  width: 100%;
  min-width: rem(250);
  background-color: $choices-bg-color-dropdown;
  border: rem(1) solid $choices-keyline-color;
  top: 100%;
  margin-top: rem(-1);
  border-bottom-left-radius: $choices-border-radius;
  border-bottom-right-radius: $choices-border-radius;
  overflow: hidden;
  word-break: break-all;

  &.is-active {
    display: block;
  }

  .is-open & {
    border-color: darken($choices-keyline-color, 15%);
  }

  .is-flipped & {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: rem(-1);
    border-radius: .25rem .25rem 0 0;
  }

  .#{$choices-selector}__list {
    position: relative;
    max-height: rem(300);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
  }

  .#{$choices-selector}__item {
    position: relative;
    padding: rem(10);
    font-size: $choices-font-size-md;

    [dir="rtl"] & {
      text-align: right;
    }
  }

  .#{$choices-selector}__item--selectable {
    @media (min-width: rem(640)) {
      padding-right: rem(100);

      &::after {
        content: attr(data-select-text);
        font-size: $choices-font-size-sm;
        opacity: 0;
        position: absolute;
        right: rem(10);
        top: 50%;
        transform: translateY(-50%);
      }

      [dir="rtl"] & {
        text-align: right;
        padding-left: rem(100);
        padding-right: rem(10);

        &::after {
          right: auto;
          left: rem(10);
        }
      }
    }

    &.is-highlighted {
      background-color: $sui-color-brand-denim-300;

      &::after {
        opacity: .6;
      }
    }
  }
}

.#{$choices-selector}__item {
  cursor: default;
}

.#{$choices-selector}__item--selectable {
  cursor: pointer;
}

.#{$choices-selector}__item--disabled {
  cursor: not-allowed;
  user-select: none;
  opacity: .5;
}

.#{$choices-selector}__heading {
  font-weight: 600;
  font-size: $choices-font-size-sm;
  padding: rem(10);
  border-bottom: rem(1) solid lighten($choices-keyline-color, 10%);
  color: $sui-color-text-light;
}

.#{$choices-selector}__button {
  text-indent: rem(-9999);
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  color: inherit;

  &::after {
    content: '\00d7';
    text-indent: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 1.2;
  }

  &:focus {
    outline: none;
  }
}

.#{$choices-selector}__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: $sui-color-brand-denim-100;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: rem(3) 0 rem(3) rem(6);

  &:focus {
    outline: 0;
  }

  [dir="rtl"] & {
    padding-right: rem(2);
    padding-left: 0;
  }
}

.#{$choices-selector}__placeholder {
  color: $sui-color-text-light;
}
