/*
 * このサイト（hugo-book テーマ）で uikit を使うための追加スタイル。uikit.css の後に読み込む
 * assets/uikit/ の uikit.css / uikit.js は編集しない（`make uikit` で取り込み直す）。サイトで足すものはこのファイルに書く
 *
 * レイヤーの順序は html-head.html の <style> で宣言している:
 *   tokens, base, compat, theme, components, utilities, overrides
 * - theme: テーマの CSS（book.scss）。uikit の base より強く、uikit の部品（components / utilities）より弱い
 * - compat: uikit の base（リセットと素の要素の装飾）を取り消し、テーマ本来の見た目に戻す。uikit の部品の中は除く（下の :is() の一覧）
 */

@layer compat {
  /*
   * uikit の base と同じ要素・同じプロパティを revert する。uikit の base が変わったら、ここも合わせる
   * all: revert は使わない（lang 属性による言語指定や、iframe の width / height 属性まで消えてしまうため）
   */
  :where(:root, :root *) {
    &, &::before, &::after {
      box-sizing: revert;
      outline-color: revert;
      margin: revert;
      padding: revert;
    }
    /* iframe は frameborder 属性（枠線の太さ 0）の指定まで消えるので、太さだけは base の 0 のままにする */
    &:not(iframe), &::before, &::after {
      border: revert;
    }
    &:where(iframe) {
      border-style: revert;
      border-color: revert;
    }
    &:where(:root) {
      color-scheme: revert;
    }
    &:where(html) {
      font-family: revert;
      line-height: revert;
      -webkit-text-size-adjust: revert;
      -webkit-font-smoothing: revert;
      tab-size: revert;
    }
    &:where(body) {
      min-height: revert;
      background: revert;
      color: revert;
      font-size: revert;
      line-height: revert;
    }
    &:where(h1, h2, h3, h4) {
      font-size: revert;
      line-height: revert;
      font-weight: revert;
      letter-spacing: revert;
      text-wrap: revert;
    }
    &:where(p) {
      text-wrap: revert;
    }
    &:where(a) {
      color: revert;
      text-decoration: revert;
      text-underline-offset: revert;
    }
    &:where(strong, b) {
      font-weight: revert;
    }
    &:where(small) {
      font-size: revert;
    }
    &:where([role="list"]) {
      list-style: revert;
    }
    &:where(blockquote) {
      color: revert;
      font-style: revert;
    }
    &:where(hr) {
      height: revert;
    }
    &:where(code, kbd, samp, pre) {
      font-family: revert;
      font-size: revert;
      border-radius: revert;
      background: revert;
      box-shadow: revert;
    }
    &:where(pre) {
      line-height: revert;
      overflow-x: revert;
    }
    &:where(img, video, canvas) {
      display: revert;
      max-width: revert;
      height: revert;
    }
    &:where(svg) {
      flex-shrink: revert;
    }
    &:where(table) {
      border-collapse: revert;
      border-spacing: revert;
    }
    &:where(button, input, select, textarea) {
      font: revert;
      color: revert;
      letter-spacing: revert;
    }
    &:where(button) {
      background: revert;
      cursor: revert;
    }
    &:where(fieldset) {
      min-width: revert;
    }
    &:where(textarea) {
      resize: revert;
    }
    &::placeholder {
      color: revert;
      opacity: revert;
    }
    &:where(:focus-visible) {
      outline: revert;
      outline-offset: revert;
    }
    &:where(:disabled, [aria-disabled="true"]) {
      opacity: revert;
      cursor: revert;
    }
    @media (prefers-reduced-motion: reduce) {
      &, &::before, &::after {
        animation: revert;
      }
    }
  }
}

/*
 * uikit の部品。この一覧に当たる要素とその中は、uikit のとおりに表示する。uikit に部品が増えたらここに足す
 */
:is(
  .accordion, .alert, .badge, .btn, .bubble, .card, .dialog, .dropdown, .gradient-flow,
  .input, .textarea, .select, .checkbox, .radio, .switch, .label,
  .panel, .popover, .progress, .skeleton, .split-btn, .table, .tabs, .toast, .tooltip, .typography,
  .stack, .cluster, .grid, .center, .container,
  ui-tabs, ui-toast, [data-tooltip],
  .breadcrumb
) {
  /* 文字の大きさは uikit の body と同じにする（テーマの .markdown は 16px で、uikit は 14px を前提にしているため）。部品が自分で決めている大きさが優先される */
  @layer base {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }
  /* uikit の base を効かせる（compat の取り消しを外す） */
  @layer compat {
    &, & *, &::before, &::after, &::placeholder, & *::before, & *::after, & *::placeholder {
      all: revert-layer;
    }
  }
  /* テーマの本文の装飾（段落の余白や表の罫線など）をかけない。:not(#_) は、テーマの `.content .markdown table tr td` などより詳細度を上げるため */
  @layer theme {
    &:not(#_), & :not(#_) {
      all: revert-layer;
    }
  }
  /* Markdown の本文に置いた時は、段落と同じだけ上下を空ける（ダイアログやポップオーバーは画面に重ねて出すので除く） */
  @layer components {
    .markdown > &:not(dialog, [popover]) {
      margin-block: var(--space-4);
    }
    .markdown > &:first-child {
      margin-top: 0;
    }
    /* アコーディオンは続けて並べると 1 つにまとまるので、間を空けない */
    .markdown > &:is(.accordion + .accordion) {
      margin-top: 0;
    }
    .markdown > &:is(.accordion:has(+ .accordion)) {
      margin-bottom: 0;
    }
  }
}

@layer tokens {
  :root {
    /* Lucide: chevron-right */
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  }
}

/**
 * @component breadcrumb
 * @desc パンくずリスト。<nav aria-label> の中の <ol> に、上の階層から順に <li> を並べる。今のページまで入れる時は、リンクにせず aria-current="page" を付ける。区切りの › は CSS で自動で付く
 * @var --breadcrumb-gap
 * @example
 * <nav class="breadcrumb" aria-label="パンくずリスト"><ol><li><a href="/">ホーム</a></li><li><a href="#">親のページ</a></li><li><span aria-current="page">今のページ</span></li></ol></nav>
 */
@layer components {
  .breadcrumb {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    & ol {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--breadcrumb-gap, var(--space-1));
      padding: 0;
      list-style: none;
    }
    & li {
      display: inline-flex;
      align-items: center;
      gap: var(--breadcrumb-gap, var(--space-1));
      margin: 0;
    }
    & li + li::before {
      content: "";
      width: var(--space-4);
      height: var(--space-4);
      background: currentColor;
      mask: var(--icon-chevron-right) center / contain no-repeat;
    }
    & a {
      color: inherit;
      text-decoration: none;
      transition: color var(--duration) var(--ease);
      &:hover {
        color: var(--foreground);
        text-decoration: underline;
      }
    }
    & [aria-current="page"] {
      color: var(--foreground);
    }
  }
}

/* タイトルの上に置いたパンくずリスト（themes/hugo-book/layouts/partials/docs/breadcrumb.html）の上下の余白 */
@layer components {
  .book-page > .breadcrumb {
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
  }
}