@use '../variables' as variables;

:where(:not(a):not(b):not(bdi):not(bdo):not(cite):not(data):not(del):not(dfn):not(em):not(i):not(ins):not(mark):not(q):not(ruby):not(s):not(samp):not(small):not(span):not(strong):not(sub):not(sup):not(time):not(u):not(svg)) {
  @include variables.typography();
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  text-underline-offset: 0.1em;
  text-decoration-thickness: 1px;
}

:where(
  address,
  article,
  aside,
  blockquote,
  details,
  dialog,
  dd,
  div,
  dl,
  dt,
  fieldset,
  figcaption,
  figure,
  footer,
  form,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  header,
  hgroup,
  hr,
  li,
  main,
  nav,
  ol,
  p,
  pre,
  section,
  table,
  ul
) {
  margin: 0;
  padding: 0;
}

:where(li) {
  margin-inline-start: 1.5em;
}

small {
  font-size: smaller;
}

sup {
  font-size: smaller;

  @supports (font-variant-position: super) {
    font-variant-position: super;
    vertical-align: baseline;
    font-size: inherit;
  }
}

sub {
  font-size: smaller;

  @supports (font-variant-position: sub) {
    font-variant-position: sub;
    vertical-align: baseline;
    font-size: inherit;
  }
}

img,
video {
  height: auto;
  max-width: 100%;
}

figure {
  max-width: 100%;
}

figcaption {
  --unitone--font-size: -2;

  margin: var(--unitone--s-2) 0 0;
  display: block;
  width: 0;
  min-width: fit-content !important;
  text-align: start;
}

pre {
  text-spacing-trim: space-all;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  [role="tab"],
  [role="switch"],
  label,
  select,
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"], /* スライダー */
  input[type="color"], /* カラーピッカー */
  summary
 ) {
  cursor: pointer;
}

:where(
  button:disabled,
  input:disabled,
  select:disabled,
  [aria-disabled="true"]
) {
  cursor: not-allowed;
}