/* Plain elements look right without a class. */
@layer base {
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: 500;
    line-height: var(--line-height-tight);
    margin-block-end: var(--space-2);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  h4 {
    font-size: var(--font-size-h4);
  }

  small {
    font-size: 0.875em;
  }

  a {
    color: var(--color-link);
    text-decoration: none;

    &:hover {
      color: var(--color-link-hover);
    }
  }

  :focus-visible {
    outline: 2px solid var(--color-focus-border);
    outline-offset: 2px;
  }

  table {
    width: 100%;
    vertical-align: top;
  }

  th,
  td {
    padding: var(--space-3);
    border-block-end: var(--border);
    background-color: var(--color-bg);
  }

  thead th {
    font-weight: bold;
    vertical-align: bottom;
  }

  tbody tr:nth-child(odd) > * {
    background-color: var(--color-row-stripe);
  }

  tbody tr:hover > * {
    background-color: var(--color-row-hover);
  }

  tbody tr:target > * {
    background-color: var(--color-row-target);
  }

  label,
  legend {
    display: inline-block;
    margin-block-end: var(--space-2);
  }

  input:not([type="checkbox"], [type="radio"], [type="submit"]),
  select,
  textarea {
    display: block;
    width: 100%;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-bg);
    border: var(--border);
    border-radius: var(--radius);
    line-height: var(--line-height);

    &:focus {
      border-color: var(--color-focus-border);
      outline: 0;
      box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
    }
  }

  select {
    appearance: none;
    padding-inline-end: var(--space-6);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 12px;
  }

  input[type="checkbox"] {
    accent-color: var(--color-primary);
  }

  button,
  input[type="submit"] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius);
    line-height: var(--line-height);
    cursor: pointer;

    &:hover {
      background-color: var(--color-primary-hover);
    }
  }
}