@use "../../../2-tools/tools-index";

@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  .combo-box-input {
    &[type="text"] {
      padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
      &.text-input--clear-icon-visible {
        padding: 0 var(--spacing-4xl) 0 var(--spacing-xs);
      }
    }
    &__chevron {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: var(--spacing-xs);
      font-weight: var(--font-weight-normal);
      [class*="utds-icon-before-"]::before {
        font-size: 0.9rem;
      }
      &--is-disabled {
        color: var(--form-ele-disabled-color);
      }
      &[disabled]:active {
        transform: translateY(-50%);
      }
    }
    &__inner-wrapper {
      .text-input__clear-button {
        right: var(--spacing-xl);
      }
      .input-wrapper--text-input {
        margin: 0;
      }
      .tooltip__wrapper {
        z-index: 2001;
      }
    }
    &__list-box {
      background: white;
      border-radius: var(--radius-small);
      border: 1px solid var(--gray-3-1-contrast);
      box-sizing: border-box;
      list-style-type: none;
      margin: 0;
      padding: 0;
      z-index: 2000;
      max-height: clamp(300px, 40vh, 40vh);
      overflow: auto;
      width: max-content;
    }
    &__option {
      padding: var(--spacing-2xs) var(--spacing-s);
      font-weight: var(--font-weight-normal);
      &:hover {
        background: var(--hover-gray-color);
        cursor: default;
        color: black;
      }
      &--selected {
        background: var(--form-ele-color);
        color: white;
      }
      &--highlighted {
        background: var(--hover-gray-color);
        color: black;
      }
      &--disabled {
        color: var(--gray-3-1-contrast);
        &:hover {
          color: var(--gray-3-1-contrast);
        }
      }
      @include tools-index.form-ele-focus;
      &:focus-visible {
        outline-offset: -2px;
        border-radius: var(--radius-small1x);
      }
    }
    &__group-wrapper {
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        li.combo-box-input__option {
          padding: var(--spacing-2xs) var(--spacing-s) var(--spacing-2xs) var(--spacing);
        }
      }
    }
    &__group-title {
      font-weight: var(--font-weight-bold);
      position: relative;
      color: var(--gray-color);
      span {
        background: white;
        z-index: 2;
        position: relative;
        padding-right:  var(--spacing-s);
      }
      &:hover {
        background-color: transparent;
        color: var(--gray-color);
      }
      &:after {
        content: "";
        background: var(--gray-3-1-contrast);
        display: block;
        width: calc(100% - var(--spacing-xl));
        height: 1px;
        position: absolute;
        top: 50%;
      }
    }
  }
}