button,
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
  border-radius: 10rem;
  background: var(--color-button-bg);
  color: var(--color-button-fg);
  border: none;
  padding: var(--spacing-xs) var(--spacing-s);
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: 500 !important;
  text-decoration: none;
  transition: opacity var(--transition-easing);
  cursor: pointer;

  &:hover {
    opacity: .8;
  }

  a {
    text-decoration: none;
  }

  // Trim label leading for consistent text centering, re-add it as padding to keep height
  @supports (text-box-trim: trim-both) {
    & > span:not(:has(svg)) { // labels, not the icon (also a child <span>)
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }

    &:has(svg) { // icon anchors height → re-add on the button
      --trim-comp: 0.25em; // half of the leading removed
      padding-block: calc(var(--spacing-xs) + var(--trim-comp));
      &.cta      { padding-block: calc(var(--spacing-xs) * 1.5 + var(--trim-comp)); }
      &.tertiary { padding-block: calc(.2rem + var(--trim-comp)); }
      &.toggler  { padding-block: calc(.25rem + var(--trim-comp)); }
    }

    &.toggler:not(:has(svg)) { padding-block: calc(.25rem); } // icon anchors height

    &:not(:has(svg)):not(.toggler) > span { padding-block: 0.4em; } // nothing → on the label
  }

  &.cta {
    padding: calc(var(--spacing-xs)*1.5) calc(var(--spacing-s)*1.5);
    display: inline-flex;
    gap: 2rem;
    font-size: var(--font-size-body);
    >div {
      font-size: var(--font-size-lead);
    }
  }

  &.secondary {
    --color-button-bg: var(--color-goldenBeige);
    --color-button-fg: var(--color-deepBrick);
  }

  &.tertiary {
    font-size: var(--font-size-caption);
    color: currentColor;
    background: transparent;
    border: 2px solid currentColor;
    padding: .2rem .75rem;
  }

  &.toggler {
    --color-button-bg: var(--color-chateauBlue);
    --color-button-fg: var(--color-chateauBlue);
    background: transparent;
    border: 2px solid var(--color-button-bg);
    padding: .25rem .5rem .25rem .75rem;
    position: relative;

    &:after {
      content: "";
      width: 1rem;
      height: 1rem;
      border-radius: 1rem;
      background: var(--color-white);
      border: 2px solid var(--color-button-bg);
    }

    &[data-active=true] {
      --color-button-bg: var(--color-chateauBlue);
      --color-button-fg: var(--color-white);
      background: var(--color-button-bg);

      &:after {
        content: "";
        width: 1rem;
        height: 1rem;
        border-radius: 1rem;
        background: var(--color-white);
        border: 2px solid var(--color-button-bg);
      }

      &:before {
        content: "";
        width: .4rem;
        height: .2rem;
        border-bottom: 3px solid var(--color-button-bg);
        border-left: 3px solid var(--color-button-bg);
        position: absolute;
        right: .8rem;
        transform: rotate(-45deg);
      }
    }

    &.hasIcon {
      --color-button-bg: var(--color-deepBrick);
      --color-button-fg: var(--color-deepBrick);
      &:after {
        display: none;
      }
      &[data-active=true] {
        --color-button-bg: var(--color-deepBrick);
        --color-button-fg: var(--color-betongGray);

        &:after, &:before {
          display: none;
        }
      }
    }
  }
}
