@use '../variables' as variables;

*,
*::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;
}

:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  font-size: 100%;
}

small {
  font-size: smaller;
}

sup {
  position: relative;
  top: -.6em;
  vertical-align: baseline;
  font-size: .7em;
}

sub {
  vertical-align: baseline;
  font-size: .7em;
}

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

figure {
  max-width: 100%;
}

figcaption {
  margin: var(--unitone--s-2) 0 0;
  display: block;
  width: 0;
  min-width: fit-content !important;
  font-size: var(--unitone--font-size-xs);
  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;
}