/* Overlays (shadcn/ui dialog, alert-dialog, sheet, dropdown-menu, popover, tooltip, sonner),
/* on native elements: <dialog> for dialogs and sheets, the popover attribute for menus and
/* popovers. The ui--popover Stimulus controller places a popover under its trigger; the rest
/* is CSS.
/*
/*   <dialog class="ui-dialog" id="x">                        open with ui_dialog_trigger, or
/*     <header class="ui-dialog__header">                      the existing dialog controller
/*       <h2 class="ui-dialog__title">…</h2>
/*       <p class="ui-dialog__description">…</p>
/*     </header>
/*     …
/*     <footer class="ui-dialog__footer">…buttons…</footer>
/*   </dialog>
/*
/*   <dialog class="ui-sheet ui-sheet--right">…same parts…</dialog>
/*
/*   <div data-controller="ui--popover">
/*     <button class="ui-button ui-button--outline" popovertarget="menu-1">Open</button>
/*     <div class="ui-menu" id="menu-1" popover data-ui--popover-target="popover">
/*       <div class="ui-menu__label">My account</div>
/*       <a class="ui-menu__item" href="…">Profile <kbd class="ui-menu__shortcut">⌘P</kbd></a>
/*       <hr class="ui-menu__separator">
/*       <button class="ui-menu__item ui-menu__item--destructive">Delete</button>
/*     </div>
/*   </div>
/*
/*   <span class="ui-tooltip">
/*     <button …>…</button>
/*     <span role="tooltip" class="ui-tooltip__content">Add to library</span>
/*   </span> */
@layer ui {
  /* Dialog */

  html:has(:is(.ui-dialog, .ui-sheet):modal) {
    overflow: hidden;
  }

  .ui-dialog,
  .ui-sheet {
    background-color: var(--background);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--foreground);
    gap: 1rem;
    padding: 1.5rem;
    text-align: start;
    transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms, scale 150ms, translate 200ms;

    &[open] {
      display: grid;
    }

    &::backdrop {
      background-color: rgb(0 0 0 / 50%);
      opacity: 0;
      transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms;
    }

    &[open]::backdrop {
      opacity: 1;
    }

    @starting-style {
      &[open]::backdrop {
        opacity: 0;
      }
    }
  }

  .ui-dialog {
    border-radius: var(--radius-lg);
    inline-size: calc(100% - 2rem);
    max-block-size: calc(100dvh - 2rem);
    max-inline-size: 32rem;
    opacity: 0;
    overflow: auto;
    scale: 0.95;

    &[open] {
      opacity: 1;
      scale: 1;
    }

    @starting-style {
      &[open] {
        opacity: 0;
        scale: 0.95;
      }
    }
  }

  .ui-dialog--lg { max-inline-size: 42rem; }
  .ui-dialog--sm { max-inline-size: 24rem; }

  .ui-dialog__header {
    display: grid;
    gap: 0.5rem;
    text-align: center;

    @media (min-width: 640px) {
      text-align: start;
    }
  }

  .ui-dialog__title {
    font-size: var(--text-large);
    font-weight: 600;
    line-height: 1;
    margin: 0;
  }

  .ui-dialog__description {
    color: var(--muted-foreground);
    font-size: var(--text-normal);
    margin: 0;
  }

  .ui-dialog__footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;

    @media (min-width: 640px) {
      flex-direction: row;
      justify-content: flex-end;
    }

    form {
      display: contents;
    }
  }

  /* The ✕ in the corner. */
  .ui-dialog__close {
    border-radius: var(--radius-sm);
    inset: 1rem 1rem auto auto;
    opacity: 0.7;
    position: absolute;

    &:hover {
      opacity: 1;
    }
  }

  /* Sheet: a dialog that slides in from an edge. */
  .ui-sheet {
    align-content: start;
    block-size: 100dvh;
    border-block: 0;
    border-radius: 0;
    inline-size: 75%;
    inset: 0 0 0 auto;
    margin: 0;
    max-block-size: 100dvh;
    max-inline-size: 24rem;
    overflow: auto;
    translate: 100% 0;

    &[open] {
      translate: 0 0;
    }

    @starting-style {
      &[open] {
        translate: 100% 0;
      }
    }
  }

  .ui-sheet--left {
    inset: 0 auto 0 0;
    translate: -100% 0;

    @starting-style {
      &[open] {
        translate: -100% 0;
      }
    }
  }

  /* Menu (dropdown-menu) and popover */

  .ui-menu,
  .ui-popover {
    background-color: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--popover-foreground);
    inset: auto;
    text-align: start;
    margin: 0;
    opacity: 0;
    scale: 0.95;
    transition: display 100ms allow-discrete, overlay 100ms allow-discrete, opacity 100ms, scale 100ms;

    &:popover-open {
      opacity: 1;
      scale: 1;
    }

    @starting-style {
      &:popover-open {
        opacity: 0;
        scale: 0.95;
      }
    }
  }

  /* Without the controller (or before it places one), a popover sits in the middle. */
  .ui-menu:not([data-placed]),
  .ui-popover:not([data-placed]) {
    inset: 0;
    margin: auto;
  }

  .ui-menu {
    max-block-size: min(24rem, 70dvh);
    min-inline-size: 8rem;
    overflow-y: auto;
    padding: 0.25rem;

    &:popover-open {
      display: flex;
      flex-direction: column;
    }

    form {
      display: contents;
    }
  }

  .ui-popover {
    inline-size: 18rem;
    max-inline-size: calc(100vw - 1rem);
    padding: 1rem;
  }

  .ui-menu__item {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: inherit;
    cursor: default;
    display: flex;
    font: inherit;
    font-size: var(--text-normal);
    gap: 0.5rem;
    inline-size: 100%;
    outline: none;
    padding: 0.375rem 0.5rem;
    text-align: start;
    text-decoration: none;
    user-select: none;

    :is(svg, .icon) {
      --icon-size: 1rem;

      block-size: 1rem;
      color: var(--muted-foreground);
      flex-shrink: 0;
      inline-size: 1rem;
    }

    &:is(:hover, :focus-visible, [aria-selected="true"]) {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    &:is(a, button, label) {
      cursor: pointer;
    }

    &:disabled,
    &[aria-disabled="true"] {
      opacity: 0.5;
      pointer-events: none;
    }

    /* A checkable item: a hidden radio or checkbox; the check shows on the right. */
    &:has(input:is([type="radio"], [type="checkbox"])) input {
      appearance: none;
      margin: 0;
      position: absolute;
    }

    &:has(input:checked)::after,
    &[aria-checked="true"]::after {
      block-size: 0.875rem;
      background-color: currentColor;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      content: "";
      flex-shrink: 0;
      inline-size: 0.875rem;
      margin-inline-start: auto;
      scale: 0.7;
    }
  }

  .ui-menu__item--destructive {
    color: var(--destructive);

    :is(svg, .icon) {
      color: var(--destructive);
    }

    &:is(:hover, :focus-visible) {
      background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
      color: var(--destructive);
    }
  }

  .ui-menu__label {
    font-size: var(--text-normal);
    font-weight: 500;
    padding: 0.375rem 0.5rem;
  }

  .ui-menu__separator {
    background-color: var(--border);
    block-size: 1px;
    border: 0;
    margin: 0.25rem -0.25rem;
  }

  .ui-menu__shortcut {
    background: none;
    border: 0;
    color: var(--muted-foreground);
    opacity: 1;
    padding: 0;
    text-transform: none;
    font-family: inherit;
    font-size: var(--text-x-small);
    letter-spacing: 0.1em;
    margin-inline-start: auto;
  }

  /* Tooltip: shown while its trigger is hovered or focused. */
  .ui-tooltip {
    display: inline-flex;
    position: relative;
  }

  .ui-tooltip__content {
    background-color: var(--foreground);
    border-radius: var(--radius-md);
    color: var(--background);
    font-size: var(--text-x-small);
    inline-size: max-content;
    inset: auto auto calc(100% + 0.375rem) 50%;
    max-inline-size: 20rem;
    opacity: 0;
    padding: 0.375rem 0.75rem;
    pointer-events: none;
    position: absolute;
    scale: 0.95;
    transition: opacity 100ms, scale 100ms;
    translate: -50% 0;
    z-index: var(--z-tooltip);

    .ui-tooltip:is(:hover, :focus-within) & {
      opacity: 1;
      scale: 1;
      transition-delay: 300ms;
    }
  }

  .ui-tooltip--bottom .ui-tooltip__content {
    inset: calc(100% + 0.375rem) auto auto 50%;
  }

  /* Toast (sonner), top centre: the bottom right is the notification bell's. The flash partial
  /* (layouts/shared/_flash) renders one per notice or alert. */
  .ui-toaster {
    display: grid;
    gap: 0.5rem;
    inline-size: min(22rem, calc(100vw - 2rem));
    inset: calc(1rem + var(--custom-safe-inset-top)) auto auto 50%;
    pointer-events: none;
    position: fixed;
    translate: -50% 0;
    z-index: var(--z-flash);
  }

  .ui-toast {
    align-items: center;
    /* In, a few seconds up, out: one animation, so animationend (which removes it) fires once. */
    animation: ui-toast 4.4s ease-out both;
    background-color: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--popover-foreground);
    display: flex;
    font-size: var(--text-normal);
    gap: 0.5rem;
    padding: 1rem;
    pointer-events: auto;

    :is(svg, .icon) {
      --icon-size: 1rem;

      flex-shrink: 0;
    }

    &:hover {
      animation-play-state: paused;
    }
  }

  .ui-toast--error {
    color: var(--destructive);
  }

  @keyframes ui-toast {
    0% { opacity: 0; translate: 0 -0.5rem; }
    5%, 95% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 -0.5rem; }
  }
}