/* Shared moving highlight for native and custom selection lists.
   This stylesheet is served directly because Next's CSS parser does not yet
   accept the standard nested ::picker(select)::after pseudo-element. */
@supports (appearance: base-select) and selector(select::picker(select)::after) and (top: anchor(--contaro-select-active top)) {
  select:not([multiple]):not([size])::picker(select) { isolation: isolate; }

  select:not([multiple]):not([size]) option { position: relative; z-index: 1; }
  select:open:not([multiple]):not([size]) option:is(:checked, :hover, :focus-visible):not(:disabled) { background: transparent; }

  select:open option:checked:not(:disabled) { anchor-name: --contaro-select-active; }
  select:open[data-highlight-input="pointer"]:has(option:hover) option:checked:not(:hover) { anchor-name: none; }
  select:open[data-highlight-input="pointer"] option:hover:not(:disabled) { anchor-name: --contaro-select-active; }
  select:open:not([data-highlight-input="pointer"]):has(option:focus-visible) option:not(:focus-visible) { anchor-name: none; }
  select:open:not([data-highlight-input="pointer"]) option:focus-visible:not(:disabled) { anchor-name: --contaro-select-active; }

  select:not([multiple]):not([size])::picker(select)::after {
    content: '';
    display: none;
    position: fixed;
    top: anchor(--contaro-select-active top, 0px);
    left: anchor(--contaro-select-active left, 0px);
    width: anchor-size(--contaro-select-active width, 0px);
    height: anchor-size(--contaro-select-active height, 0px);
    z-index: 0;
    border-radius: 8px;
    background: var(--app-hover);
    pointer-events: none;
  }

  select:has(option:checked:not(:disabled))::picker(select)::after,
  select[data-highlight-input="pointer"]:has(option:hover:not(:disabled))::picker(select)::after,
  select:not([data-highlight-input="pointer"]):has(option:focus-visible:not(:disabled))::picker(select)::after { display: block; }
  select[data-highlight-input="pointer"]:has(option:disabled:hover)::picker(select)::after { display: none; }

  select[data-highlight-input="pointer"]::picker(select)::after {
    transition: top 180ms cubic-bezier(0.22, 1, 0.36, 1), left 180ms cubic-bezier(0.22, 1, 0.36, 1), width 180ms ease, height 180ms ease;
  }
  select:not([multiple]):not([size])[data-highlight-input="touch"]::picker(select)::after { display: none; }

  @media (prefers-reduced-motion: reduce) {
    select[data-highlight-input="pointer"]::picker(select)::after { transition: none; }
  }
}

@supports (top: anchor(--contaro-selection-active top)) and (anchor-scope: --contaro-selection-active) {
  .contaro-selection-surface {
    isolation: isolate;
    anchor-scope: --contaro-selection-active;
  }

  .contaro-selection-surface .contaro-selection-option { background: transparent; }
  .contaro-selection-surface:not([data-highlight-input="pointer"]):not([data-highlight-input="touch"]) .contaro-selection-option[data-highlighted="true"],
  .contaro-selection-surface:not([data-highlight-input="pointer"]):not([data-highlight-input="touch"]) .contaro-selection-option:focus-visible,
  .contaro-selection-surface:not([data-highlight-input="pointer"]):not([data-highlight-input="touch"]) .contaro-selection-option:has(input:focus-visible),
  .contaro-selection-surface[data-highlight-input="pointer"] .contaro-selection-option:hover:not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)) {
    anchor-name: --contaro-selection-active;
  }

  .contaro-selection-surface::after {
    content: '';
    display: none;
    position: absolute;
    top: anchor(--contaro-selection-active top, 0px);
    left: anchor(--contaro-selection-active left, 0px);
    width: anchor-size(--contaro-selection-active width, 0px);
    height: anchor-size(--contaro-selection-active height, 0px);
    z-index: -1;
    border-radius: 8px;
    background: var(--app-hover);
    pointer-events: none;
  }
  .contaro-selection-surface[data-highlight-input="pointer"]:has(.contaro-selection-option:hover:not(:disabled):not([aria-disabled="true"])):not(:has(.contaro-selection-option:hover input:disabled))::after,
  .contaro-selection-surface:not([data-highlight-input="pointer"]):not([data-highlight-input="touch"]):has(.contaro-selection-option[data-highlighted="true"], .contaro-selection-option:focus-visible, .contaro-selection-option input:focus-visible)::after { display: block; }
  .contaro-selection-surface[data-highlight-input="pointer"]::after {
    transition: top 180ms cubic-bezier(0.22, 1, 0.36, 1), left 180ms cubic-bezier(0.22, 1, 0.36, 1), width 180ms ease, height 180ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .contaro-selection-surface[data-highlight-input="pointer"]::after { transition: none; }
  }
}