Set Class

// ボタンやリンク、モーダルスタイルをリセットするためのユーティリティクラス
// Memo: font:inherit は書いていない。→  .-font:inherit がある + フォーム系には reset.css で記述済み + line-height に影響が出るため。

.set--plain {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  color: inherit;
  font: inherit;
  line-height: calc(1em + var(--hl) * 2); /* 全称セレクタ と同じ値 */
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  text-decoration: none;
  border-radius: 0;
}

// HTML 要素の基礎スタイリング ― ブラウザ標準の見た目を復活させる汎用クラス
// set--revert 単体では何も適用されず、HTML要素と組み合わせて使う想定。現状は ul / ol のみ対象だが、ユーザーが a / button など他要素に対しても自由に使える。
:is(ul, ol).set--revert {
  list-style: revert;
  padding-inline-start: var(--list-ps, 1.75em);
}

/* --------------------------------------------------
  shadow
    Memo: :root だけで --bxsh-- をセットしてしまうと --shc がその時点で固定されるので、
    要素ごとに --shc を上書きできるよう、再セット用の set--bxsh クラスを併用する。
-------------------------------------------------- */
:root {
  --shc: var(--shadow);

  --shsz--10: 0px 1px 3px;
  --shsz--20: 0px 2px 6px;
  --shsz--30: 0px 4px 12px;
  --shsz--40: 0px 8px 24px;
  --shsz--50: 0px 16px 48px;
}

:root,
.set--bxsh {
  --bxsh--10: var(--shsz--10) var(--shc);
  --bxsh--20: var(--shsz--20) var(--shc);
  --bxsh--30: var(--shsz--30) var(--shc);
  --bxsh--40: var(--shsz--40) var(--shc);
  --bxsh--50: var(--shsz--50) var(--shc);
}

/* --------------------------------------------------
  SPACEトークンの定義
    Memo: set--s で、SPACEトークンを再定義できる。
-------------------------------------------------- */
:root,
.set--s {
  /**
   * 余白: フィボナッチ数列をベースに設計する
   */
  --s-unit: calc(var(--fz--base) * 0.5); // 計算単位 ≒ 8px

  --s10: var(--s-unit); // ≒ 8px
  --s20: calc(var(--s-unit) * 2); // ≒ 16px
  --s30: calc(var(--s-unit) * 3); // ≒ 24px
  --s40: calc(var(--s-unit) * 5); // ≒ 40px
  --s50: calc(var(--s-unit) * 8); // ≒ 64px
  --s60: calc(var(--s-unit) * 13); // ≒ 104px
  --s70: calc(var(--s-unit) * 21); // ≒ 168px
  --s80: calc(var(--s-unit) * 34); // ≒ 272px

  // ~40までの前半部分は間を埋める
  --s5: calc(var(--s-unit) * 0.5); // ≒ 4px
  --s15: calc(var(--s-unit) * 1.5); // ≒ 12px
  --s25: calc(var(--s-unit) * 2.5); // ≒ 20px
  --s35: calc(var(--s-unit) * 4); // ≒ 32px
}
.set--s {
  // 何も指定しなければ em 単位に変換する
  --s-unit: 0.5em;
}

@media (any-hover: hover) {
  .set--hov:hover {
    --_notHov: ;
  }
  .set--hov:not(:is(:hover, :focus-within)) {
    --_isHov: ;
  }
}
@media (any-hover: none) {
  .set--hov {
    --_isHov: ;
  }
}
.set--hov:is(:focus-visible, :focus-within) {
  --_notHov: ;
}

.set--bleed {
  --bleed: max(var(--gutter, var(--gutter--base)), calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2));
}

.set--bdrsInner {
  --bdrs--inner: calc(var(--bdrs, 0px) - var(--p, 0px));
}