@layer fristil {
  .fs-button {
    /* Designsystemet kan ikke regne med at konsumenten har en CSS-reset.
       Uten border-box legges padding og ramme utenpå width, og feltet
       blir bredere enn boksen det ligger i. */
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    gap: var(--fs-spacing-2);
    padding: var(--fs-button-padding, var(--fs-spacing-2) var(--fs-spacing-4));
    font-family: inherit;
    font-size: var(--fs-font-size-m);
    /* Vekt, linjeavstand og rammetykkelse er form, og form leses fra en
       komponentvariabel med tokenverdien som reserve. Et tema som vil ha
       fete knapper med tykk ramme, slik noen designsystemer har, setter dem
       uten å skrive en eneste selektor av. */
    font-weight: var(--fs-button-font-weight, var(--fs-font-weight-medium));
    line-height: var(--fs-button-line-height, var(--fs-line-height-default));
    border: var(--fs-button-border-width, 1px) solid var(--fs-color-accent-fill);
    border-radius: var(--fs-button-radius, var(--fs-spacing-1));
    background: var(--fs-color-accent-fill);
    color: var(--fs-color-accent-content);
    cursor: pointer;
    text-decoration: none;
    user-select: none;

    /* Teksten får brekke. Med `white-space: nowrap` sprengte en knapp med en
       lang norsk ledetekst boksen sin på en telefon, og da ruller hele siden
       sidelengs. Knappen skal aldri bli bredere enn plassen den får.

       `normal` står eksplisitt fordi `white-space` arves: en konsument med
       `nowrap` på noe rundt ville ellers fått problemet tilbake. Målt i
       Chromium holder `text-wrap: balance` alene, siden den setter
       `text-wrap-mode: wrap` og dermed slår den arvede verdien, men den
       eksplisitte linja gjelder også der `text-wrap` ikke er støttet. */
    white-space: normal;
    max-inline-size: 100%;
    text-align: center;
    text-wrap: balance;
  }

  /* Hover går bort fra `content`: mørkere i lyst tema, lysere i mørkt. `text`
     er rollen som ligger der, og siden lysheten er rollens og ikke
     merkefargens, holder teksten oppå knappen kontrasten sin uansett kulør.
     `content oppå text` er et løfte i kontrakten. */
  .fs-button:hover {
    background: var(--fs-color-accent-text);
    border-color: var(--fs-color-accent-text);
  }

  .fs-button:focus-visible {
    outline: var(--fs-focus-ring);
    outline-offset: 2px;
  }

  /* Sekundær: omriss, gjennomsiktig bakgrunn */
  .fs-button[data-variant="secondary"] {
    background: transparent;
    color: var(--fs-color-accent-text);
    border-color: var(--fs-color-accent-border);
  }

  .fs-button[data-variant="secondary"]:hover:not(
    :disabled,
    [aria-disabled="true"]
  ) {
    background: var(--fs-color-accent-surface);
  }

  /* Ghost: ingen kant, ingen bakgrunn */
  .fs-button[data-variant="ghost"] {
    background: transparent;
    color: var(--fs-color-accent-text);
    border-color: transparent;
  }

  .fs-button[data-variant="ghost"]:hover:not(
    :disabled,
    [aria-disabled="true"]
  ) {
    background: var(--fs-color-accent-surface);
  }

  /* Danger */
  .fs-button[data-variant="danger"] {
    background: var(--fs-color-danger-surface);
    color: var(--fs-color-danger-text);
    border-color: var(--fs-color-danger-text);
  }

  .fs-button[data-variant="danger"]:hover:not(
    :disabled,
    [aria-disabled="true"]
  ) {
    background: var(--fs-color-danger-fill);
    border-color: var(--fs-color-danger-fill);
    color: var(--fs-color-danger-content);
  }

  /*
   * Deaktivert står sist.
   *
   * Sto regelen over variantene, vant de på rekkefølgen: en deaktivert
   * sekundær-, ghost- eller fareknapp så ut som en aktiv. Variantenes hover
   * er mer spesifikk enn denne uansett plass, og en deaktivert knapp treffes
   * fortsatt av `:hover`. Derfor unntar hver av dem den deaktivert selv.
   */
  .fs-button:disabled,
  .fs-button[aria-disabled="true"] {
    background: var(--fs-color-disabled-surface);
    color: var(--fs-color-disabled-text);
    border-color: var(--fs-color-disabled-surface);
    /* Ingen pointer-events: none her. Nettleseren blokkerer allerede et
       deaktivert felt, og pointer-events ville bare hindret markøren i å
       vises. Elementet blir da ikke truffet av musa i det hele tatt. */
    cursor: not-allowed;
  }

  /* aria-disabled er bare en opplysning til skjermlesere; elementet virker
     fortsatt. Her stopper pointer-events musa, på bekostning av markøren.
     Skal feltet faktisk være av, bruk `disabled` eller `readonly`. */
  .fs-button[aria-disabled="true"] {
    pointer-events: none;
  }
}