@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --dh-scrim: rgb(0 0 0 / .45);
    --dh-row: var(--surface-hover);
    --dh-toast-ink: var(--btn-b);
    --dh-toast-on: var(--btn-fg);
  }
}

@layer components {
  .dh-save {
    min-inline-size: 11.5rem;
    min-block-size: 44px;
  }

  .dh-save__ico {
    flex: none;
    --ico: 18px;
  }

  .dh-save__ico--done,
  .dh-save[data-save-state="installed"] .dh-save__ico--add {
    display: none;
  }

  .dh-save[data-save-state="installed"] .dh-save__ico--done {
    display: block;
  }

  .dh-save__labels {
    display: grid;
    align-items: center;
  }

  .dh-save__label {
    grid-area: 1 / 1;
    visibility: hidden;
    white-space: nowrap;
  }

  .dh-save__label.is-on {
    visibility: visible;
  }

  .dh-save[data-save-state="installed"] {
    background-image: none;
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-radius: var(--r-pill);
    cursor: default;
  }

  .dh-save[data-save-state="installed"]:hover {
    background-image: none;
    background: var(--accent-soft);
    opacity: 1;
  }

  .dh-dlg {
    --dh-shift: 12px;
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    border: 0;
    inline-size: min(100% - var(--s6), 460px);
    block-size: fit-content;
    max-block-size: min(88dvh, 680px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--elevated);
    color: var(--text-1);
    border-radius: var(--r-card);
    opacity: 0;
    translate: 0 var(--dh-shift);
    transition:
      opacity var(--t) var(--ease),
      translate var(--t) var(--ease),
      display var(--t) allow-discrete,
      overlay var(--t) allow-discrete;
  }

  .dh-dlg[open] {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .dh-dlg[open] {
      opacity: 0;
      translate: 0 var(--dh-shift);
    }
  }

  .dh-dlg.is-drag {
    transition: none;
  }

  .dh-dlg::backdrop {
    background: var(--dh-scrim);
    opacity: 0;
    transition:
      opacity var(--t) var(--ease),
      display var(--t) allow-discrete,
      overlay var(--t) allow-discrete;
  }

  .dh-dlg[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .dh-dlg[open]::backdrop {
      opacity: 0;
    }
  }

  .dh-dlg--sheet {
    --dh-shift: 100%;
    inset: auto 0 0 0;
    margin: 0 auto;
    inline-size: min(100%, 520px);
    border-radius: 0;
    border-start-start-radius: var(--r-card);
    border-start-end-radius: var(--r-card);
  }

  @media (max-width: 560px) {
    .dh-dlg {
      --dh-shift: 100%;
      inset: auto 0 0 0;
      margin: 0 auto;
      inline-size: 100%;
      border-radius: 0;
      border-start-start-radius: var(--r-card);
      border-start-end-radius: var(--r-card);
    }
  }

  @media (min-width: 561px) {
    .dh-dlg:not(.dh-dlg--sheet) .dh-grab {
      display: none;
    }

    .dh-dlg:not(.dh-dlg--sheet) .dh-dlg__body {
      padding-block-start: var(--s5);
    }
  }

  .dh-grab {
    display: grid;
    place-items: center;
    block-size: 28px;
    touch-action: none;
    cursor: grab;
  }

  .dh-grab span {
    inline-size: 38px;
    block-size: 5px;
    border-radius: var(--r-pill);
    background: var(--text-3);
  }

  .dh-dlg__body {
    display: grid;
    gap: var(--s4);
    padding-inline: var(--s5);
    padding-block-end: max(var(--s5), env(safe-area-inset-bottom));
  }

  .dh-dlg__head {
    display: grid;
    gap: var(--s1);
  }

  .dh-dlg__title {
    font-size: var(--fs-lg);
  }

  .dh-dlg__sub {
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .dh-rows {
    display: grid;
    gap: 1px;
    background: var(--elevated);
    border-radius: var(--r-nested);
    overflow: hidden;
  }

  .dh-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--dh-row);
  }

  .dh-row__ico {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-ink);
  }

  .dh-row__t {
    display: block;
    font-weight: 600;
  }

  .dh-row__s {
    display: block;
    margin-block-start: 1px;
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .dh-note {
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .dh-keys {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-nested);
    background: var(--dh-row);
  }

  .dh-dlg kbd {
    display: inline-block;
    min-inline-size: 26px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--elevated);
    color: var(--text-1);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
  }

  .dh-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    justify-self: start;
    max-inline-size: 100%;
    padding: 10px var(--s4);
    border-radius: var(--r-ctl);
    background: var(--dh-row);
    color: var(--text-1);
    font-weight: 600;
    cursor: grab;
  }

  .dh-link:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
    text-decoration: none;
  }

  .dh-link__url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dh-dlg__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
  }

  .dh-toast {
    position: fixed;
    inset-inline: 0;
    inset-block-start: calc(var(--nav-h, 56px) + env(safe-area-inset-top, 0px));
    z-index: 90;
    display: flex;
    justify-content: center;
    padding: var(--s4);
    pointer-events: none;
  }

  .dh-toast__box {
    --text-1: var(--dh-toast-on);
    --text-2: var(--dh-toast-on);
    --accent-ink: var(--dh-toast-on);
    --btn-a: var(--dh-toast-on);
    --btn-b: var(--dh-toast-on);
    --btn-fg: var(--dh-toast-ink);
    --surface-2: color-mix(in srgb, var(--dh-toast-on) 16%, transparent);
    --surface-hover: color-mix(in srgb, var(--dh-toast-on) 26%, transparent);
    display: flex;
    align-items: center;
    gap: var(--s3);
    max-inline-size: 460px;
    padding: var(--s3) var(--s3) var(--s3) var(--s5);
    border-radius: var(--r-ctl);
    background: var(--dh-toast-ink);
    color: var(--dh-toast-on);
    font-size: var(--fs-sm);
    pointer-events: auto;
  }

  .dh-toast__text {
    flex: 1 1 auto;
  }

  .dh-toast__box .btn {
    flex: none;
    white-space: nowrap;
  }
}

@layer utilities {
  .dh-lock {
    overflow: hidden;
  }
}

@media (forced-colors: active) {
  .dh-dlg,
  .dh-row,
  .dh-keys,
  .dh-link,
  .dh-toast__box {
    outline: 1px solid ButtonBorder;
    outline-offset: -1px;
  }
}