/* --------------------------
   Custom HotwireCombobox Styles
   -------------------------- */

/* Root variables – adjust colors to match your theme */
:root {
  /* Colors */
  --hw-active-bg-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* active option background on hover */
  --hw-border-color: transparent; /* no borders on input wrapper */
  --hw-component-bg-color: transparent; /* transparent wrapper */
  --hw-group-color: #f9fafb; /* group label text color */
  --hw-group-bg-color: transparent;
  --hw-invalid-color: #ef4444; /* invalid state (if needed) */
  --hw-dialog-label-color: #1d1d1d;
  --hw-focus-color: #ebf2ff; /* focus ring: cc-blue-text-lighter */
  --hw-option-bg-color: rgba(0, 0, 0, 0.7); /* dark dropdown background */

  /* Sizing & spacing */
  --hw-border-radius: 0.375rem;
  --hw-border-width--slim: 1px;
  --hw-border-width--thick: 2px;
  --hw-combobox-width: full;
  --hw-combobox-width--multiple: 30rem;
  --hw-dialog-font-size: 1.25rem;
  --hw-dialog-input-height: 2.5rem;
  --hw-dialog-label-alignment: center;
  --hw-dialog-label-padding: 0.5rem 0 0.375rem;
  --hw-dialog-label-size: 1.05rem;
  --hw-dialog-listbox-margin: 1.25rem 0 0;
  --hw-dialog-padding: 1rem 1rem 0;
  --hw-dialog-top-offset: 18vh;
  --hw-font-size: 1rem;
  --hw-handle-offset-right: 0.375rem;

  --hw-handle-width: 1.5rem;
  --hw-handle-width--queried: 1rem;
  --hw-line-height: 1.5rem;
  --hw-line-height--multiple: 2.125rem;
  --hw-listbox-height: calc(var(--hw-line-height) * 10);
  --hw-listbox-z-index: 50;

  --hw-padding--slimmer: 0.25rem;
  --hw-padding--slim: 0.375rem;
  --hw-padding--thick: 0.75rem;
  --hw-selection-chip-font-size: 0.875rem;
  --hw-visual-viewport-height: 100vh;

  /* Dropdown handle images */
  --hw-handle-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  --hw-handle-image--queried: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
}

/* Base container */
.hw-combobox {
  border-width: 0;
  display: inline-flex;
  flex-direction: column;
  font-size: var(--hw-font-size);
  gap: var(--hw-padding--slim);
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;

  &,
  * {
    box-sizing: border-box;
  }
}

/* Input wrapper: no border or background */
.hw-combobox__main__wrapper {
  border: none;
  background-color: var(--hw-component-bg-color);
  position: relative;
}

/* Input field – no border; add focus ring (Tailwind’s focus:ring-1 focus:ring-inset equivalent) */
.hw-combobox__input {
  font-size: inherit;
  line-height: var(--hw-line-height);
  min-width: 0;
  padding: var(--hw-padding--slim) var(--hw-padding--thick); /* Updated padding */
  text-overflow: ellipsis;
  width: 100%;
  outline: none;
}

.hw-combobox__input:focus,
.hw-combobox__input:focus-visible,
.hw-combobox__input:focus-within {
  box-shadow: 0 0 0 1px var(--hw-focus-color) inset;
}

/* Dropdown handle */
.hw-combobox__handle {
  height: 100%;
  position: absolute;
  right: var(--hw-handle-offset-right);
  top: 0;
  width: var(--hw-handle-width);
}

.hw-combobox__handle::before {
  background-image: var(--hw-handle-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--hw-handle-width);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.hw-combobox__input[data-queried] + .hw-combobox__handle::before {
  background-image: var(--hw-handle-image--queried);
  background-size: var(--hw-handle-width--queried);
}

/* Dropdown listbox: longer, floating, glassy, and dark */
.hw-combobox__listbox {
  width: auto;
  min-width: 100%;
  max-height: 20rem;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0.25rem; /* slight horizontal offset */
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: var(--hw-border-radius);
  /* Remove internal padding so the background encloses all options */
  padding: 0;
  overflow-y: scroll;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

/* Group container */
.hw-combobox__group {
  display: none;
  padding: 0;
}

.hw-combobox__group:has(.hw-combobox__option:not([hidden])) {
  display: block;
}

/* Group label: slightly larger and semi-bold */
.hw-combobox__group__label {
  font-size: 18px;
  font-weight: 600;
  padding: 0.25rem 1rem;
  color: #f9fafb;
}

/* Option styling inside dropdown */
.hw-combobox__option {
  background-color: transparent;
  padding: 0.5rem 1rem;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f9fafb;
  cursor: pointer;
}

.hw-combobox__option--blank {
  border-bottom: var(--hw-border-width--slim) solid var(--hw-border-color);
}

/* Option states */
.hw-combobox__option:hover,
.hw-combobox__option--navigated,
.hw-combobox__option--selected {
  background-color: var(--hw-active-bg-color);
}

/* Dialog styles (if applicable) */
.hw-combobox__dialog__wrapper {
  display: none;
  height: 100vh;
  inset-inline-start: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
}

.hw-combobox__dialog__wrapper:has([open]) {
  display: flex;
}

.hw-combobox__dialog {
  border: 0;
  font-size: var(--hw-dialog-font-size);
  height: auto;
  margin: 0;
  max-height: calc(
    var(--hw-visual-viewport-height) - var(--hw-dialog-top-offset)
  );
  max-width: none;
  overflow: hidden;
  padding: var(--hw-dialog-padding);
  pointer-events: auto;
  position: fixed;
  top: var(--hw-dialog-top-offset);
  width: auto;
}

.hw-combobox__dialog[open] {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hw-combobox__dialog::backdrop {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 50%,
    #040810 50%
  );
}

.hw-combobox__dialog__label {
  align-self: var(--hw-dialog-label-alignment);
  color: var(--hw-dialog-label-color);
  font-size: var(--hw-dialog-label-size);
  padding: var(--hw-dialog-label-padding);
}

.hw-combobox--ios & {
  position: absolute;
}

.hw-combobox__dialog__input {
  border: var(--hw-border-width--slim) solid var(--hw-border-color);
  border-radius: var(--hw-border-radius);
  font-size: inherit;
  height: var(--hw-dialog-input-height);
  line-height: var(--hw-dialog-input-height);
  padding: var(--hw-padding--slim) var(--hw-padding--thick);
  text-overflow: ellipsis;
  width: 90%;
}

.hw-combobox__dialog__listbox {
  margin: var(--hw-dialog-listbox-margin);
  overflow: auto;
  padding: 0;
  width: 100%;
}

.hw-combobox__dialog__listbox [role="option"] {
  border-radius: var(--hw-border-radius);
  padding: var(--hw-padding--thick);
}

/* Chip styling (if applicable) */
.hw-combobox__chip {
  align-items: center;
  border: var(--hw-border-width--slim) solid var(--hw-border-color);
  border-radius: var(--hw-border-radius);
  display: flex;
  font-size: var(--hw-selection-chip-font-size);
  line-height: var(--hw-line-height);
  padding: var(--hw-padding--slimmer);
  padding-left: var(--hw-padding--slim);
}

.hw-combobox__chip__remover {
  background-image: var(--hw-handle-image--queried);
  background-size: var(--hw-handle-width--queried);
  background-repeat: no-repeat;
  margin-left: var(--hw-padding--slimmer);
  min-height: var(--hw-handle-width--queried);
  min-width: var(--hw-handle-width--queried);
}

/* For multiple selection mode */
.hw-combobox--multiple .hw-combobox__main__wrapper {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hw-padding--slimmer);
  width: var(--hw-combobox-width--multiple);
}

.hw-combobox--multiple
  .hw-combobox__main__wrapper:has([data-hw-combobox-chip])
  .hw-combobox__input::placeholder {
  color: transparent;
}

.hw-combobox--multiple .hw-combobox__input {
  min-width: calc(var(--hw-combobox-width) / 2);
  flex-grow: 1;
  line-height: var(--hw-line-height--multiple);
  max-width: 100%;
  width: 1rem;
}

/* Pagination styling (if applicable) */
.hw_combobox__pagination__wrapper {
  background-color: var(--hw-option-bg-color);
}

.hw_combobox__pagination__wrapper:only-child {
  background-color: transparent;
}