/* 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 {
  display: inline-block;
  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;
  transition:
    opacity 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms 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;
}

/* 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 {
  background: transparent;
  color: var(--sk-ink);
  border-color: currentColor;
}
.sk-btn-outline {
  background: transparent;
  color: var(--sk-ink);
  border-color: var(--sk-ink);
}
/* SELECTED IS THE ROLE'S WORD, CURRENT IS THE BUTTON'S, and both must paint the
 * same: a strip marks its current member with `aria-selected` as a tablist and
 * `aria-current` where the frames cannot be panels. `="true"`, not a bare
 * presence test: a nav link states `aria-current="page"`, a different claim. */
.sk-btn-outline:hover,
.sk-btn-outline[aria-selected="true"],
.sk-btn-outline[aria-current="true"] {
  background: var(--sk-btn-bg);
  color: var(--sk-btn-ink);
  border-color: var(--sk-btn-bg);
}

/* 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: 0.5em 1.2em;
}

/* A CTA's small trailing glyph ("Contact Sales →"), a child part of the
 * button register: spaced off the label, inheriting the register's ink. */
.sk-btn-glyph {
  display: inline-block;
  margin-left: 0.35em;
  line-height: 1;
}
.sk-btn-glyph > svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* 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;
  background-position: left bottom;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size 0.35s var(--sk-ease-out);
}
.sk-btn-link:hover {
  background-size: 100% 1px;
}