/*
  button — the glass pill button on light surfaces (component.json button, 29 tokens).
  Text + trailing arrow ("View work"), or arrow only (a 48px circle: the prev/next arrows).
  States: default, hover, pressed, disabled, focus (ring only).
    fill: the same in every state; hover and pressed change what's layered on top.
    hover: mint glow + stronger shadow.   pressed: stronger glow + recessed highlight, no drop shadow.
    disabled: the resting look, grey text and icon, ignores hover and press, still focusable
              (use aria-disabled="true", not the disabled attribute, so it stays reachable by keyboard).
  MOTION (BUILD 19): glow, shadow and pressed highlight fade between states at
  button.transition (feedback). A press appears at once; releasing it fades back.
  Gradients can't be blended, so each glow sits on its own layer and fades by opacity:
  the hover glow on ::after, the pressed glow on .button__press (an empty span inside
  the button; ::before is the rim). The inside pressed highlight is drawn on that same
  pressed layer, on top of its glow (as before), so it appears and fades with it.
*/

.button {
  --rim-image: var(--button-border-all);
  --rim-width: var(--button-border-width-all);
  --button-shadow: var(--button-shadow-default);
  --button-hover-glow-opacity: 0; /* glow.default is "none" */
  --button-press-glow-opacity: 0;
  isolation: isolate; /* keeps the glow layers behind the icon, in front of the fill */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-icon-gap-all);
  height: var(--button-height-all);
  padding-inline: var(--button-padding-horizontal-all);
  border: 0;
  border-radius: var(--button-radius-all);
  background-color: var(--button-fill-all);
  color: var(--button-content-default);
  font-family: var(--button-text-style-all-font-family);
  font-size: var(--button-text-style-all-font-size);
  font-weight: var(--button-text-style-all-font-weight);
  line-height: var(--button-text-style-all-line-height);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* The drop shadow. Pressed has none ("none" blends smoothly to and from a shadow). */
  box-shadow: var(--button-shadow);
  transition:
    box-shadow var(--button-transition-all-duration) var(--button-transition-all-easing),
    color var(--button-transition-all-duration) var(--button-transition-all-easing);
}

/* The two glow layers (glow.light on hover, glow.lightStrong while pressed), faded by opacity. */
.button::after,
.button__press {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--button-transition-all-duration) var(--button-transition-all-easing);
}
.button::after {
  background-image: var(--button-glow-hover);
  opacity: var(--button-hover-glow-opacity);
}
.button__press {
  background-image: var(--button-glow-pressed);
  /* the recessed highlight, drawn inside the button so it reads as pushed in */
  box-shadow: inset var(--button-highlight-pressed);
  opacity: var(--button-press-glow-opacity);
}

@media (hover: hover) {
  .button:hover:not([aria-disabled="true"]) {
    --button-shadow: var(--button-shadow-hover); /* highlight.hover is "none" */
    --button-hover-glow-opacity: 1;
    color: var(--button-content-hover);
  }
}

/* pressed: appears at once (no transition); releasing it fades back to hover or rest */
.button:active:not([aria-disabled="true"]) {
  --button-hover-glow-opacity: 0;
  --button-press-glow-opacity: 1;
  box-shadow: var(--button-shadow-pressed);
  color: var(--button-content-pressed);
  transition-duration: 0s;
}
.button:active:not([aria-disabled="true"])::after,
.button:active:not([aria-disabled="true"]) .button__press {
  transition-duration: 0s;
}

/* disabled: the resting look (no glow, highlight "none"), grey icon, ignores hover and press */
.button[aria-disabled="true"] {
  --button-shadow: var(--button-shadow-disabled);
  --button-hover-glow-opacity: 0;
  --button-press-glow-opacity: 0;
  color: var(--button-content-disabled);
  cursor: default;
}

.button:focus-visible {
  outline: var(--button-focus-ring-width-focus) solid var(--button-focus-ring-color-focus);
  outline-offset: var(--button-focus-ring-offset-focus);
}

/* arrow only: a 48px circle */
.button--icon {
  width: var(--button-icon-only-width-all);
  padding-inline: 0;
}

.button__icon {
  width: var(--button-icon-size-all);
  height: var(--button-icon-size-all);
}