// ********************************************
// container definition
$el-container: #{$prefix}-selectbox;

// elements
$control-el: #{$el-container}__control;
$menu-el: #{$el-container}__menu;
$menu-list-el: #{$el-container}__menu-list;
$menu-option-el: #{$el-container}__option;
$dropdown-indicator-el: #{$el-container}__dropdown-indicator;
$indicators-el: #{$el-container}__indicators;
$indicator-el: #{$el-container}__indicator;
$indicator-separator: #{$el-container}__indicator-separator;
$placeholder-el: #{$el-container}__placeholder;
$value-container: #{$el-container}__value-container;

// ********************************************
// local
$border-type: solid 1px;
$radius: 2px;
$input-height: 28px;

.#{$control-el} {
  @include border-radius($radius);
  border: solid 1px color(neutral, 400);
  transition: all duration(base) easing(base);
  background: transparent;
  height: space(m) * 1.17;
  outline: none;
  color: color(neutral, 800);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  padding-right: 0;

  & + div {
    position: absolute;
    z-index: 1000;
    width: 100%;
  }

  &:focus-within {
    .#{$indicator-separator} {
      background-color: transparent;
    }
  }

  &:active {
    border-color: color(brand-primary, 700);
    color: color(neutral, 800);

    .#{$indicator-el} {
      color: color(neutral, 000);
    }
  }

  &:disabled,
  &--is-disabled {
    @include dsDisabledFakeBorder();
    .#{$indicator-separator} {
      background-color: color(neutral, 400);
    }
  }

  &--is-focused {
    .#{$indicator-separator} {
      background-color: transparent;
    }
  }
}

.#{$placeholder-el} {
  @include body-text-style(regular);
  color: color(neutral, 500);
  font-style: italic;
  position: absolute;
  pointer-events: none;
  top: space(xxs) * 1.3;
}

.#{$menu-option-el} {
  padding: space(xs);
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
  cursor: pointer;
  display: block;
  &--is-focused {
    background-color: color(brand-primary, 200);
  }

  &--is-selected {
    background-color: color(brand-primary, 600);
    color: color(neutral, 000);
    svg, svg:not([fill]) {
      fill: color(neutral, 000);
    }
  }

  overflow: hidden;
}

.floating-label-input-controller {
  .#{$dropdown-indicator-el} {
    margin-top: space(xxs) * -0.5;
  }
}

.#{$control-el} {
  .dropdown-indicator {
    width: space(m) * 1.16;
  }
  .#{$indicators-el} {
    position: relative;
    .clear-indicator {
      svg, svg:not([fill]) {
        padding: 0;
        margin-top: calc(#{space(xxs)} * (-0.5));
      }
    }
  }

  &--is-focused:not(&--menu-is-open) {
    // on focus
    .#{$value-container} {
      @include dsFocus();
    }
  }
}

.#{$indicators-el} {
  &:focus-within {
    .#{$indicator-separator} {
      background-color: transparent;
    }
  }
  // & > button:focus{
  //   // @include dsFocus();
  // }
}

.#{$indicator-separator} {
  margin-top: 0%;
  margin-bottom: 0;
  height: 60%;
  width: 1px;
  background-color: color(neutral, 200);
}

/**
VARIANTS
**/
.#{$el-container}--variant-focus-input {
  .#{$indicator-separator} {
    background-color: transparent;
  }
  .#{$value-container} {
    @include dsFocus();
  }
}

.#{$el-container}--variant-active-input {
  .#{$indicator-separator} {
    background-color: transparent;
  }
  .#{$value-container} {
    @include dsActive();
  }
}

.#{$control-el}--menu-is-open,
.#{$el-container}--variant-active-icon {
  &:not(&:focus-within) {
    .#{$indicator-separator} {
      background-color: transparent;
    }
    .#{$indicators-el} {
      @include dsActive();
    }
  }
}
.#{$el-container}--variant-focus-icon {
  .#{$indicators-el} {
    @include dsFocus();
  }
}

.#{$el-container}--variant-disabled {
  .#{$el-container}__single-value {
    @include dsDisabled();
  }
}
.#{$el-container}--variant-error {
  .#{$control-el} {
    @include dsWithErrorFakeBorder();
  }
}

.combobox-menu-menu {
  @include dsActive();
  padding: 0;
  box-shadow: none;
  margin-top: space(xxs);
}

.combobox-menu-list {
  .#{$menu-option-el} {
    overflow: hidden; // avoid overflow inside option
    &--is-selected {
      background-color: color(brand-primary, 600);
      color: color(neutral, 000);
      svg, svg:not([fill]) {
        fill: color(neutral, 000);
      }
    }
  }
  &.combobox-menu-list-is-multi {
    .#{$menu-option-el} {
      &--is-selected {
        background-color: transparent;
      }
    }
  }
}

.combobox-multi-select-header {
  padding: space(s);
}
.#{$el-container}__value-container{
  &:focus-within {
    @include dsFakeActive();
  }
}
.#{$el-container}__value-container.#{$el-container}__value-container--has-value {
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  color: color(neutral, 800);
  &:focus-within {
    // @include dsFakeActive();
  }
}
.#{$el-container}__value-container--is-multi.#{$el-container}__value-container--has-value {
  flex-wrap: nowrap;
  .#{$el-container}__multi-value {
    div {
      max-width: 100%;
    }
  }
  .#{$el-container}__multi-value__remove {
    background: none !important;
    padding-left: 0;
  }
}


// ValueContainer
.combobox-value-container{
  width: 100%;
  &:focus {
    @include dsFocus();
  }
}