/* FormSelect.module.css */

/* =========================================
   Root container (select + optional clear)
   ========================================= */

.container {
  display: inline-flex;
  align-items: stretch;
  flex-grow: 1;
  gap: 0;

  inline-size: var(--input-width, auto);
  min-inline-size: var(--input-min-width, 0);
  max-inline-size: var(--input-max-width, none);

  position: relative;
  border-radius: var(--border-radius-default);
}

/* Full width variant */
.fullWidth {
  display: flex;
  inline-size: 100%;
  min-inline-size: 0;
}

/* =========================================
   Focus ring (GROUP LEVEL)
   ========================================= */

.container:focus-within {
  box-shadow: 0 0 0 2px var(--color-field-focus);
  z-index: 1;
}

/* IMPORTANT:
   When focused, do NOT also turn the select's border blue,
   otherwise you get the vertical seam line next to the button. */
.container:focus-within .input {
  border-color: var(--color-border-default);
}
.container:focus-within .trailingButton {
  border-color: var(--color-border-default);
}

/* =========================================
   Field wrapper (native select + chevron)
   ========================================= */

.field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-inline-size: 0;
  color: var(--color-fg-default);
}

/* =========================================
   Native select styling
   ========================================= */

.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;

  background: var(--color-bg-surface);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  box-sizing: border-box;
  text-overflow: ellipsis;

  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--border-radius-default);

  padding-inline: var(--spacing-sm);
  padding-block: var(--spacing-xs);

  /* Reserve space for chevron */
  padding-inline-end: calc(var(--spacing-lg) + 28px);

  transition:
    background-color var(--transition-fast) var(--ease-standard),
    border-color var(--transition-fast) var(--ease-standard),
    box-shadow var(--transition-fast) var(--ease-standard);
}

/* Disabled select */
.input:disabled {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-fg);
  cursor: not-allowed;
}

/* Hover state */
.input:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

/* Remove default focus ring (we use group-level ring) */
.input:focus-visible {
  outline: none;
  /* DO NOT set border-color here */
}

/* =========================================
   Variants
   ========================================= */

.filled {
  background-color: var(--color-bg-surface);
}

.standalone {
  border-radius: var(--border-radius-rounded);
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-xs), var(--shadow-md);
}

.outlined {
  background-color: transparent;
}

/* Ghost field for use inside/near AppHeader — only meaningful there */
.header {
  background-color: transparent;
  border-color: var(--color-navbar-border);
  color: var(--color-navbar-fg);
}

.header:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-navbar-fg) 8%, transparent);
}

.container:focus-within .header {
  border-color: var(--color-navbar-fg);
}

.field:has(.header) .chevron {
  color: var(--color-navbar-fg-muted);
}

/* =========================================
   Sizes
   ========================================= */

.sm {
  block-size: var(--component-size-sm);
  font-size: var(--font-size-sm);
}

.md {
  block-size: var(--component-size-md);
  font-size: var(--font-size-sm);
}

.lg {
  block-size: var(--component-size-lg);
  font-size: var(--font-size-lg);
}

/* =========================================
   Chevron (decorative only)
   ========================================= */

.chevron {
  position: absolute;
  inset-inline-end: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--color-fg-subtle);
}

.chevron svg {
  inline-size: 20px;
  block-size: 20px;
}

/* =========================================
   Clear button integration
   ========================================= */

/* Remove right radius from select when button exists */
.withButton .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  /* Prevent double border seam; the button provides the right side */
  border-right-color: transparent;
}

/* Trailing clear button */
.trailingButton {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding-inline: var(--spacing-sm);

  border: var(--border-width-thin) solid var(--color-border-default);

  /* Seam join: don't draw left border; select covers it */
  border-left-color: transparent;
  margin-left: calc(-1 * var(--border-width-thin));

  border-top-right-radius: var(--border-radius-default);
  border-bottom-right-radius: var(--border-radius-default);

  background: var(--color-bg-surface);
  cursor: pointer;

  transition:
    background-color var(--transition-fast) var(--ease-standard),
    border-color var(--transition-fast) var(--ease-standard),
    box-shadow var(--transition-fast) var(--ease-standard);
}

/* Hover state */
.trailingButton:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background-color: var(--color-bg-surface-hover, var(--color-bg-surface));
}

/* Remove individual focus ring (group handles it) */
.trailingButton:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Disabled clear button:
   keep border/background stable; dim only icon */
.trailingButton:disabled {
  cursor: default;
  background: var(--color-bg-surface);
}

.trailingButton:disabled svg {
  opacity: 0.4;
}