$base-class: '.sui-MoleculeSelect';
$class-input: '#{$base-class}-inputSelect';
$class-select-atom-input: '.sui-AtomInput';
$class-select-atom-input-input: '#{$class-select-atom-input}-input';
$class-select-atom-input-tags: '#{$class-select-atom-input}--withTags';
$class-select-atom-search: '#{$class-input}-search';
$class-select-atom-search-container: '#{$class-select-atom-search}-container';

#{$base-class} {
  display: flex;
  flex-grow: 1;
  width: 100%;
  border-radius: $bdrs-select;
  position: relative;
  $this: &;
  &:not(#{$base-class}--isBorderless) {
    &#{$this}:focus-within:has(#{$class-select-atom-search-container}:focus-within):not(:has(#{$class-select-atom-search}:focus-within)),
    &#{$this}:focus-within:has(#{$class-input}-container:focus-within) {
      outline-style: solid;
      outline-color: transparentize($c-primary, 0.2);
      outline-width: 2px;
      outline-offset: 2px;
      border-radius: $bdrs-select;
    }
  }
  #{$class-select-atom-input-input} {
    padding-right: $pr-atom-input + -$mr-select-list-arrow + $w-select-list-arrow;
  }
  #{$class-select-atom-input-tags} {
    padding-right: $pr-select-atom-input-tags + -$mr-select-list-arrow + $w-select-list-arrow;
    padding-left: $pl-atom-input;
    #{$class-select-atom-input-input} {
      padding-right: 0;
    }
  }

  &.is-disabled {
    cursor: default;

    #{$class-select-atom-input-input} {
      -webkit-text-fill-color: $c-molecule-select-disabled;

      background: $bg-molecule-select-disabled;
      //border: $bd-molecule-select-disabled;
      color: $c-molecule-select-disabled;
    }

    #{$class-input}-arrow {
      svg {
        fill: $c-molecule-select-arrow-disabled !important;
      }
    }
  }

  &.is-read-only {
    #{$class-input}-arrow {
      cursor: default;
      svg {
        fill: $c-molecule-select-arrow-disabled !important;
      }
    }
  }

  .sui-MoleculeDropdownList {
    //position: absolute;
    z-index: $z-select-list;
  }

  &-inputSelect {
    &-search-container {
      position: absolute;
      width: 100%;
      z-index: $z-navigation;
      top: calc(100% - 1px);
    }
    &-search {
      border-radius: $bdrs-molecule-select-search;
      border: $bd-molecule-select-search;
      border-bottom: $bd-bottom-molecule-select-search;
      padding: $p-molecule-select-search;
      background-color: $bgc-molecule-select-search;
      z-index: $z-dropdown-menu;

      &--hidden {
        display: none;
      }
    }
    &-container {
      @include sui-atom-input-input;
      box-shadow: none;
      border: $bd-atom-input-base;
      align-items: center;
      //border: $bd-select;
      border-radius: $bdrs-select;
      padding: 0;
      cursor: pointer;
      display: flex;

      #{$class-select-atom-input-input} {
        caret-color: transparent;
        background: $bgc-atom-input;
        color: $c-atom-input;
      }

      #{$class-select-atom-input-input}:disabled {
        opacity: 1;
        -webkit-appearance: none;
      }

      #{$class-select-atom-input-input}--readOnly {
        caret-color: transparent;
        background: $bgc-atom-input-read-only;
        color: $c-atom-input-read-only;
      }
    }

    &-arrow {
      position: absolute;
      right: -$mr-select-list-arrow;
      height: $h-select-list-arrow;
      width: $w-select-list-arrow;

      &--down {
        transform: rotate(0deg);
      }

      &--up {
        transform: rotate(180deg);
      }

      svg {
        fill: $c-select-list-arrow-fill !important;
        height: $h-select-list-arrow;
        width: $w-select-list-arrow;
      }
    }
  }

  &--focus {
    #{$class-input} {
      &-container {
        @include sui-atom-input-select-focus;
        //border: $bd-molecule-select-focus;
        box-shadow: none;

        .sui-AtomInput-input,
        .sui-AtomInput--withTags {
          border-color: transparent;
        }
      }
    }
  }

  @each $state, $color in $states-atom-input {
    &#{$base-class}--#{$state} {
      & #{$base-class}-inputSelect-container {
        border-color: $color;

        .sui-AtomInput-input,
        .sui-AtomInput--withTags {
          border-color: $bdc-molecule-select-input-with-state;
        }
      }

      &#{$base-class}--focus #{$base-class}-inputSelect-container {
        .sui-AtomInput-input,
        .sui-AtomInput--withTags {
          border-color: transparent;
        }
      }
    }
  }
}