@use "scss/variables";
@use "scss/colors";

$control-height: variables.$button-height-xs;

.optionsMenu {
  background-color: colors.$foreground;
  border-radius: variables.$border-radius-lg;
  box-shadow: variables.$box-shadow-raised;
  padding: 0;
  margin-top: variables.$spacing-sm;
  min-width: variables.$min-width-listbox-options-list;
  max-height: variables.$height-long-listbox-options-list;
  overflow: auto;
}

.buttonClear {
  height: $control-height;
  border: variables.$border-thin solid transparent;
  color: colors.$grey-400;
  justify-content: start;
  padding: 0;

  &--error {
    color: var(--color-red-300);

    &:hover {
      color: var(--color-red-300);
    }
  }
}

.input {
  height: $control-height;

  // prevent content from "jumping"
  border: variables.$border-thin solid colors.$grey-200;
  border-radius: variables.$border-radius-sm;
}

// prevent content from "jumping"
.inputContainer {
  border: none !important; // there is no other way to override the Input style
}

.option {
  list-style-type: none;
}

.optionValue {
  min-width: 50px;
  padding: variables.$spacing-md variables.$spacing-lg;
  cursor: pointer;
}

.focus {
  background-color: colors.$grey-50;
  height: 100%;
  width: 100%;
}

.selected {
  background-color: colors.$blue-50;
}

.block {
  display: block;
}

.description {
  color: colors.$grey-400;
}
