.theme-select {
  position: relative;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--fs-sm);
  background: var(--clr-bg);
  color: var(--clr-fg);
  border: 2px inset var(--clr-primary100);
  border-radius: var(--radius-sm);
  width: 128px;
  margin-bottom: var(--space-md);
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.5rem 0.5rem; /* top right bottom left */
  outline-offset: 3px;
}

.theme-select__indicator {
  background: var(--clr-primary100);
  color: var(--ui-selected-fg);
  font-size: var(--fs-xs);
  padding: 0.1rem 0.5rem;
  border-radius: 0.15rem;
}

/* Arrow indicator using ::after pseudo-element */
.theme-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 5px;
  height: 8px;
  background: var(--clr-fg);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%) rotate(0deg);
  pointer-events: auto;
  transition: transform 0.35s ease;
}

/* On open, rotate arrow to point right */
.theme-select[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(90deg); /* arrow points right */
}

.theme-select__options--wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%); /* only for centering */
  width: 160px; /* wider than trigger */
}

.theme-select__options {
  display: none; /* fallback for older browsers */
  background: var(--clr-bg);
  border: 2px solid var(--clr-primary100);
  border-radius: var(--radius-sm);
  margin-top: 0.25rem;
  overflow: hidden;
  z-index: 1000;

  /* Progressive enhancement */
  opacity: 0; /* start invisible */
  transform: scale(0.95) translateY(-5px); /* initial "pop" state */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease,
    display 0.3s ease allow-discrete;
  transition-behavior: allow-discrete; /* modern browsers will animate display */
}

/* Open state */
.theme-select__options.open {
  display: block;
  opacity: 1; /* minimal fade in */
  transform: scale(1) translateY(0); /* pop into place */
}

/* Option styling */
.theme-select__options li {
  background: var(--clr-bg);
  color: var(--clr-fg);
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.theme-select__options li[aria-selected="true"] {
  background: var(--ui-selected-bg);
  font-weight: bold;
  color: var(--ui-selected-fg);
}

.theme-select__options li:not([aria-selected="true"]):hover,
.theme-select__options li:not([aria-selected="true"]):focus {
  background: var(--ui-hover-bg);
  color: var(--ui-hover-fg);
  outline: none;
}

/* Starting style for entry animation */
@starting-style {
  .theme-select__options.open {
    opacity: 0; /* ensures animation triggers when display changes */
    transform: scale(0.95) translateY(-5px);
  }
}