/* The ACTION part's three registers. Every rule names them explicitly: a substring catch would also match the button's own child parts, and an undeclared variant is unstyled. */
.sk-btn,
.sk-btn-button,
.sk-btn-outline,
.sk-btn-link {
  /* Inline-flex, so the glyph centers on the label and turns about its own center. */
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: var(--kit-pad-button);
  border-radius: var(--kit-round-button);
  border-width: var(--kit-edge-button);
  border-style: var(--kit-edge-style-button);
  font-family: var(--kit-font-button);
  font-style: var(--kit-slant-button);
  font-size: var(--sk-text-btn-size);
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-button) * 1em);
  text-transform: var(--kit-caps-button);
  line-height: var(--kit-lead-button);
  text-decoration: none;
  cursor: pointer;
  /* On the bar's clock inside one: --sk-dur-paint-live inherits from the header. */
  transition:
    opacity 140ms ease,
    background-color var(--sk-dur-paint-live, 140ms) var(--sk-ease-paint, ease),
    color var(--sk-dur-paint-live, 140ms) var(--sk-ease-paint, ease),
    border-color var(--sk-dur-paint-live, 140ms) var(--sk-ease-paint, ease);
}

/* A boxed button owns its label's alignment. NOT .sk-btn-link: not a box. */
.sk-btn,
.sk-btn-button,
.sk-btn-outline {
  text-align: center;
  justify-content: center;
}

/* Hover inverts the register on the guaranteed token pairs, so every tone keeps contrast. */
.sk-btn,
.sk-btn-button {
  background: var(--sk-btn-bg);
  color: var(--sk-btn-ink);
  border-color: var(--sk-btn-bg);
}
.sk-btn:hover,
.sk-btn-button:hover,
.sk-btn[aria-current="page"],
.sk-btn[data-active="true"],
.sk-btn-button[aria-current="page"],
.sk-btn-button[data-active="true"] {
  background: transparent;
  color: var(--sk-ink);
  border-color: currentColor;
}
.sk-btn-outline {
  background: transparent;
  color: var(--sk-ink);
  border-color: var(--sk-ink);
}
/* Values listed, not a presence test, so an unrelated aria-current value paints nothing. */
.sk-btn-outline:hover,
.sk-btn-outline[aria-selected="true"],
.sk-btn-outline[aria-current="true"],
.sk-btn-outline[aria-current="page"],
.sk-btn-outline[data-active="true"] {
  background: var(--sk-btn-bg);
  color: var(--sk-btn-ink);
  border-color: var(--sk-btn-bg);
}

/* Declared on all four registers: the link register reads it without spending it. */
.sk-btn,
.sk-btn-button,
.sk-btn-outline,
.sk-btn-link {
  --sk-btn-pad-s-block: 0.5em;
  --sk-btn-pad-s-inline: 1.2em;
}
/* NOT .sk-btn-link: listing it would outrank its own padding reset by specificity. */
.sk-btn[data-size="s"],
.sk-btn-button[data-size="s"],
.sk-btn-outline[data-size="s"] {
  padding: var(--sk-btn-pad-s-block) var(--sk-btn-pad-s-inline);
}

/* A CTA's small trailing glyph ("Contact Sales →"), inheriting the register's ink. */
.sk-btn-glyph {
  display: inline-flex;
  align-items: center;
}
/* A root svg clips to its viewport, which cuts the stroke of a tight viewBox. */
.sk-btn-glyph > svg {
  overflow: visible;
}
/* A glyph with an em-valued size keeps its own aspect; the rest are 1em squares. */
.sk-btn-glyph > svg:not([width$="em"]):not([height$="em"]) {
  width: 1em;
  height: 1em;
}
/* A gapped host already spaces its flex items; the margin is for hosts that do not flex. */
:is(.sk-btn, .sk-btn-button, .sk-btn-outline, .sk-btn-link) > .sk-btn-badge,
:is(.sk-btn, .sk-btn-button, .sk-btn-outline, .sk-btn-link) > .sk-extlink {
  margin-left: 0;
}
.sk-btn-badge {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-size: 0.8em;
  letter-spacing: 0;
  background: var(--sk-accent);
  color: var(--sk-btn-ink);
}

/* The two words share one grid cell, so the control keeps its width as they swap. */
.sk-btn-label {
  display: inline-grid;
  align-items: center;
}
.sk-btn-word {
  grid-area: 1 / 1;
  /* visibility too: opacity alone leaves the hidden word in the accessibility tree. */
  transition:
    opacity var(--sk-dur-panel) var(--sk-ease-out),
    visibility var(--sk-dur-panel) var(--sk-ease-out);
}
.sk-btn-word[data-at="open"] {
  opacity: 0;
  visibility: hidden;
}
[aria-expanded="true"] .sk-btn-word[data-at="closed"] {
  opacity: 0;
  visibility: hidden;
}
[aria-expanded="true"] .sk-btn-word[data-at="open"] {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .sk-btn-word {
    transition: none;
  }
}

/* data-icon-only, stated by the host: CSS cannot see a text node. */
.sk-btn-link[data-icon-only],
.sk-btn[data-icon-only],
.sk-btn-button[data-icon-only],
.sk-btn-outline[data-icon-only] {
  /* Stated: aspect-ratio is inert on a flex item whose sizes are both auto. */
  block-size: calc(
    1em * var(--kit-lead-button) + 2 * var(--sk-btn-pad-block, 0px) + 2 *
      var(--sk-btn-edge-block, 0px)
  );
  aspect-ratio: 1;
  padding-inline: 0;
}
/* A hit area, never the drawn box; a host with no --sk-btn-tap gets none. */
.sk-btn-link[data-icon-only],
.sk-btn[data-icon-only],
.sk-btn-button[data-icon-only],
.sk-btn-outline[data-icon-only] {
  position: relative;
  justify-content: center;
}
.sk-btn-link[data-icon-only]::after,
.sk-btn[data-icon-only]::after,
.sk-btn-button[data-icon-only]::after,
.sk-btn-outline[data-icon-only]::after {
  content: "";
  position: absolute;
  inset: calc((100% - var(--sk-btn-tap)) / 2);
}

/* The quiet register matches `.sk-link`; spelled here because the register belongs to the part. */
.sk-btn-link {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-button) * 1em);
  text-transform: var(--kit-caps-button);
  font-size: var(--sk-text-btn-size);
  text-decoration: none;
  color: var(--sk-ink);
  /* After the `background: none` shorthand, or the image dies in the reset. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  padding-bottom: 2px;
  /* The position carries the direction and must not be transitioned. */
  background-position: right bottom;
  background-size: 0% 1px;
  /* `transition` is a shorthand: color is listed or the link leaves the bar's crossfade. */
  transition:
    background-size 0.35s var(--sk-ease-out),
    color var(--sk-dur-paint-live, 140ms) var(--sk-ease-paint, ease);
}
.sk-btn-link:hover,
.sk-btn-link[aria-current="page"],
.sk-btn-link[data-active="true"] {
  background-size: 100% 1px;
  background-position: left bottom;
}
/* Draws no underline; the header's toggle carries only aria-expanded. */
.sk-btn-link[aria-haspopup],
.sk-btn-link[aria-expanded] {
  background-image: none;
}
/* Only data-at="caret" turns, never a leading mark. */
.sk-btn-glyph {
  transition: rotate var(--sk-dur-panel) var(--sk-ease-out);
}
[aria-expanded="true"] > .sk-btn-glyph[data-at="caret"],
[aria-expanded="true"] .sk-btn-glyph[data-at="caret"] {
  rotate: 180deg;
}

@media (prefers-reduced-motion: reduce) {
  .sk-btn-glyph {
    transition: none;
  }
}