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

$root: 'search-field';
$paper: 'MuiAutocomplete-paper';
$no-options: 'MuiAutocomplete-noOptions';

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

  display: flex;
  flex-direction: column;

  &__option {
    &:hover {
      cursor: pointer;
      background-color: search-field-theme-color('option-hover');
    }

    &[aria-selected='true'],
    &[aria-selected='true']:hover {
      background-color: search-field-theme-color('option-selected');
    }

    &[aria-disabled='true'],
    &[aria-disabled='true']:hover {
      cursor: default;
      pointer-events: none;
    }
  }

  &__listbox {
    padding: 0;
    max-height: 235px;
  }

  &__error {
    color: search-field-theme-color('error-text');
  }

  &__hint {
    color: search-field-theme-color('hint-text');
  }

  &__no-results-text {
    color: search-field-theme-color('no-options-text');
  }

  &__no-results {
    height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

.#{$paper} {
  border-radius: 10px;
  margin-top: 5px;
  padding: 15px 0;
  background: search-field-theme-color('paper-background');
  box-shadow: 0 5px 20px search-field-theme-color('paper-shadow');

  .#{$no-options} {
    padding: 0;
  }
}