@import '../../scss/styles';

@layer payload-default {
  .react-select-container {
    width: 100%;
  }

  .react-select {
    .rs__control {
      @include formInput;
      height: auto;
      padding: base(0.35) base(0.6);
      flex-wrap: nowrap;
    }

    .rs__menu-notice {
      padding: base(0.5) base(0.6);
    }

    .rs__indicator {
      padding: 0px 4px;
      cursor: pointer;
    }

    .rs__indicator-separator {
      display: none;
    }

    .rs__input-container {
      color: var(--theme-elevation-1000);
    }

    .rs__input {
      font-family: var(--font-body);
      width: 10px;
    }

    .rs__menu {
      z-index: 4;
      border-radius: 0;
      @include shadow-lg;
      background: var(--theme-input-bg);
    }

    .rs__group-heading {
      color: var(--theme-elevation-800);
      padding-left: base(0.5);
      margin-top: base(0.25);
      margin-bottom: base(0.25);
    }

    .rs__option {
      font-family: var(--font-body);
      font-size: $baseline-body-size;
      padding: base(0.375) base(0.75);
      color: var(--theme-elevation-800);

      &--is-focused {
        background-color: var(--theme-elevation-100);
      }

      &--is-selected {
        background-color: var(--theme-elevation-300);
      }
    }

    &--error,
    &--error:hover,
    &--error:focus-within {
      div.rs__control {
        background-color: var(--theme-error-50);
        border: 1px solid var(--theme-error-500);

        & > div.rs__indicator > button.dropdown-indicator[type='button'] {
          border: none;
        }
      }
    }

    &.rs--is-disabled .rs__control {
      @include readOnly;
    }
  }
}