@use './theme.scss' as *;

$root: 'select';
$disabled: 'Mui-disabled';
$highlighted: 'MuiOption-highlighted';

.#{$root} {
  @include select-theme-modifiers();

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;

  &__label {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 700;
    color: select-theme-color('primary-text');
  }

  &__error {
    margin-top: 2px;
    color: select-theme-color('error');
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
  }

  &__empty-container {
    padding: 97px 0;
    text-align: center;
  }

  &__empty {
    color: select-theme-color('primary-text-disabled');
  }

  &__option {
    color: select-theme-color('option-text');

    &:not(.#{$disabled}) {
      cursor: pointer;
    }

    &:hover:not(.#{$disabled}) {
      background-color: select-theme-color('option-interaction');
    }

    &.#{$disabled} {
      color: select-theme-color('option-text-disabled');
    }

    &.#{$highlighted}:not(.#{$disabled}) {
      background-color: select-theme-color('option-interaction');
    }
  }

  &--isCompact {
    .#{$root} {
      &__label {
        margin-bottom: 8px;
      }

      &__error {
        margin-top: 0;
      }
    }
  }

  &--isDisabled {
    .#{$root} {
      &__label {
        color: select-theme-color('primary-text-disabled');
      }
    }
  }
}