@use "scss/variables";
@use "scss/colors";
@use "scss/z-indices";

.optionsMenu {
  width: var(--input-width); // match the combobox button's width, see https://headlessui.com/react/combobox
  --anchor-max-height: #{variables.$height-long-listbox-options-list}; // limit the option list's height, see https://github.com/tailwindlabs/headlessui/blob/b6f355d154f69ac67d2196f755f9751c6b1acba0/packages/%40headlessui-react/src/internal/floating.tsx#L317

  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;
  list-style-type: none;
  overflow-y: auto;
  z-index: z-indices.$overlay;
}

.optionValue {
  padding: variables.$spacing-md;
  cursor: pointer;
  word-break: break-all;
}

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

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

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

.optionInstructions {
  cursor: not-allowed;
  font-size: variables.$font-size-md;
  line-height: 1.2;
}

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

.caretButton {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: colors.$grey-300;
  padding-inline: variables.$spacing-md;
}
