/*
 * THE CONTEXT SWITCHER — a pill that names where you are and opens the set.
 *
 * The trigger has no resting border: it is a label with an affordance, not a
 * field, so the hover WASH is its interaction signal (the ladder every pressable
 * surface in the kit shares) rather than an edge.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-scope-switcher {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    max-width: var(--lotics-scope-switcher-max-width);
    height: var(--lotics-control-height);
    gap: var(--lotics-space-6);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--lotics-space-10);
    border: 0 solid var(--border);
    border-radius: var(--lotics-radius-control);
    background-color: transparent;
    background-image: none;
    color: var(--lotics-ink-default);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    appearance: none;
    cursor: default;
    user-select: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-scope-switcher:hover {
    background-color: var(--lotics-wash-selected);
  }

  .lotics-scope-switcher:active {
    background-color: var(--lotics-wash-press);
  }

  .lotics-scope-switcher:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-scope-switcher__label {
    min-width: 0;
  }

  .lotics-scope-switcher__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --lotics-icon-color: var(--lotics-ink-muted);
  }

  .lotics-scope-switcher__positioner {
    z-index: var(--lotics-z-overlay);
  }

  .lotics-scope-switcher__popup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    /* 220 is the ROW's floor — a workspace name needs it — so the panel's own
       inset is added on rather than eaten out of it. */
    min-width: calc(220px + var(--lotics-space-24));
    max-width: var(--available-width);
    max-height: var(--available-height);
    overflow-y: auto;
    padding: var(--lotics-space-12);
    border-radius: var(--lotics-radius-card);
    background-color: var(--card);
    box-shadow: var(--lotics-shadow-raised);
    transition-property: opacity;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-scope-switcher__popup[data-starting-style],
  .lotics-scope-switcher__popup[data-ending-style] {
    opacity: 0;
  }

  /* Its own gutter under it, so the list starts where the group's rhythm says
     rather than against the input. */
  .lotics-scope-switcher__search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    padding-block-end: var(--lotics-space-8);
  }

  /* Sits where a row would, so "nothing matched" reads as the list's answer
     rather than as a caption under the field. */
  .lotics-scope-switcher__no-results {
    padding-block: var(--lotics-space-8);
    padding-inline: var(--lotics-space-8);
  }

  .lotics-scope-switcher__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-4);
  }

  .lotics-scope-switcher__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    min-height: var(--lotics-control-height);
    padding-block: 0;
    padding-inline: var(--lotics-space-8);
    border-radius: var(--lotics-radius-control);
    background-color: transparent;
    color: var(--lotics-ink-default);
    cursor: default;
    user-select: none;
    outline-style: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-scope-switcher__item[data-highlighted] {
    background-color: var(--lotics-wash-hover);
  }

  /* The check is the ONLY mark on the current row — a wash under it as well
     would read louder than the row you are hovering. */
  .lotics-scope-switcher__item-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  /* ─── The sheet ───────────────────────────────────────────────────────────
     Under 768 the menu is a modal bottom sheet instead of an anchored panel —
     the VIEWPORT decides, never the column the trigger sits in. */

  .lotics-scope-switcher__backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--lotics-scrim);
    backdrop-filter: blur(3px);
    z-index: var(--lotics-z-overlay);
    opacity: 1;
    transition-property: opacity;
    transition-duration: var(--lotics-duration-slow);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-scope-switcher__backdrop[data-starting-style],
  .lotics-scope-switcher__backdrop[data-ending-style] {
    opacity: 0;
  }

  /* A scrim on its way out is not a target — `css_contract.test.ts` § a closing
     scrim, which is where the reason is. */
  .lotics-scope-switcher__backdrop[data-ending-style] {
    pointer-events: none;
  }

  .lotics-scope-switcher__popup[data-sheet] {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 90vh;
    padding-bottom: var(--lotics-space-32);
    border-start-start-radius: var(--lotics-radius-card);
    border-start-end-radius: var(--lotics-radius-card);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    transition-property: opacity, transform;
    transition-duration: var(--lotics-duration-slow);
  }

  .lotics-scope-switcher__popup[data-sheet][data-starting-style],
  .lotics-scope-switcher__popup[data-sheet][data-ending-style] {
    transform: translateY(100%);
  }

  .lotics-scope-switcher__close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-bottom: var(--lotics-space-8);
  }
}