/* ---------- Cerebis Select ---------- */

/*
 * Design ported from the original help-select component.
 *
 * Every rule is scoped under .cerSelect so it outweighs single-class theme and
 * Breakdance styles regardless of stylesheet order. Restyle via the custom
 * properties below rather than editing this file.
 */

.cerSelect {
  /* Pill */
  --cerSelect-bg: #0e5bb5;
  --cerSelect-bg-hover: #0c4f9e;
  --cerSelect-text: #ffffff;
  --cerSelect-divider: rgba(255, 255, 255, 0.35);
  --cerSelect-radius: 24px;
  --cerSelect-font-size: 16px;
  --cerSelect-font-weight: 700;
  --cerSelect-padding-y: 14px;
  --cerSelect-padding-x: 22px;
  --cerSelect-gap: 14px;
  --cerSelect-focus-ring: 2px solid #ffffff;
  --cerSelect-focus-offset: -3px;

  /* Menu */
  --cerSelect-list-bg: #ffffff;
  --cerSelect-list-radius: 8px;
  --cerSelect-list-padding: 6px;
  --cerSelect-list-offset: 6px;
  --cerSelect-list-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  --cerSelect-list-max-height: 340px;
  --cerSelect-list-max-width: min(92vw, 480px);
  --cerSelect-list-z: 50;

  /* Options */
  --cerSelect-option-color: #1a2330;
  --cerSelect-option-size: 15px;
  --cerSelect-option-weight: 500;
  --cerSelect-option-padding-y: 11px;
  --cerSelect-option-padding-x: 16px;
  --cerSelect-option-radius: 6px;
  --cerSelect-option-hover-bg: #eaf1fb;
  --cerSelect-option-hover-color: var(--cerSelect-bg);
  --cerSelect-option-current-weight: 700;

  position: relative;
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  font-size: var(--cerSelect-font-size);
  font-weight: var(--cerSelect-font-weight);
  line-height: 1.3;
  color: var(--cerSelect-text);
  background: var(--cerSelect-bg);
  border-radius: var(--cerSelect-radius);
  user-select: none;
}

.cerSelect,
.cerSelect *,
.cerSelect *::before,
.cerSelect *::after {
  box-sizing: border-box;
}

/* ---------- Static left segment ---------- */

.cerSelect .cerSelectPrefix {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: var(--cerSelect-padding-y) var(--cerSelect-padding-x);
  color: inherit;
  white-space: nowrap;
  border-right: 1px solid var(--cerSelect-divider);
}

/* ---------- Trigger ---------- */

.cerSelect .cerSelectControl {
  position: relative;
  min-width: 0;
}

.cerSelect .cerSelectToggle {
  /* Nuclear reset of theme button chrome, then rebuild. */
  all: unset;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cerSelect-gap);
  width: 100%;
  padding: var(--cerSelect-padding-y) var(--cerSelect-padding-x);
  font: inherit;
  line-height: inherit;
  color: var(--cerSelect-text);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--cerSelect-radius);
}

/* Square off the left edge when a static segment precedes it. */
.cerSelect .cerSelectPrefix ~ .cerSelectControl .cerSelectToggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.cerSelect .cerSelectToggle:hover,
.cerSelect.is-open .cerSelectToggle {
  color: var(--cerSelect-text);
  background: var(--cerSelect-bg-hover);
}

.cerSelect .cerSelectToggle:focus-visible {
  outline: var(--cerSelect-focus-ring);
  outline-offset: var(--cerSelect-focus-offset);
}

.cerSelect .cerSelectLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cerSelect .cerSelectIcon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
}

.cerSelect .cerSelectIcon svg {
  display: block;
}

/* The single caret variant rotates; the up/down variant is a static indicator. */
.cerSelect .cerSelectIcon--caret {
  transition: transform 0.18s ease;
}

.cerSelect.is-open .cerSelectIcon--caret {
  transform: rotate(180deg);
}

/* ---------- Menu ---------- */

.cerSelect .cerSelectList {
  position: absolute;
  z-index: var(--cerSelect-list-z);
  top: calc(100% + var(--cerSelect-list-offset));
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: var(--cerSelect-list-max-width);
  max-height: var(--cerSelect-list-max-height);
  margin: 0;
  padding: var(--cerSelect-list-padding);
  overflow-y: auto;
  list-style: none;
  background: var(--cerSelect-list-bg);
  border-radius: var(--cerSelect-list-radius);
  box-shadow: var(--cerSelect-list-shadow);
}

.cerSelect .cerSelectList[hidden] {
  display: none;
}

.cerSelect .cerSelectItem {
  margin: 0;
  padding: 0;
  list-style: none;
  text-indent: 0;
}

/* Themes that draw bullets with pseudo-elements. */
.cerSelect .cerSelectItem::before {
  content: none;
}

.cerSelect .cerSelectItem::marker {
  content: "";
}

/* ---------- Options ---------- */

.cerSelect .cerSelectOption {
  display: block;
  padding: var(--cerSelect-option-padding-y) var(--cerSelect-option-padding-x);
  font-family: inherit;
  font-size: var(--cerSelect-option-size);
  font-weight: var(--cerSelect-option-weight);
  line-height: 1.35;
  color: var(--cerSelect-option-color);
  text-decoration: none;
  border: 0;
  border-radius: var(--cerSelect-option-radius);
  box-shadow: none;
}

.cerSelect .cerSelectOption:hover,
.cerSelect .cerSelectOption:focus {
  color: var(--cerSelect-option-hover-color);
  text-decoration: none;
  background: var(--cerSelect-option-hover-bg);
}

.cerSelect .cerSelectOption:focus-visible {
  outline: 2px solid var(--cerSelect-bg);
  outline-offset: -2px;
}

.cerSelect .cerSelectOption[aria-current="page"] {
  font-weight: var(--cerSelect-option-current-weight);
  color: var(--cerSelect-option-hover-color);
}

@media (prefers-reduced-motion: reduce) {
  .cerSelect .cerSelectIcon--caret {
    transition: none;
  }
}