.skt-button {
  --skt-button-word-duration: 380ms;
  --skt-button-word-stagger: 60ms;
  --skt-button-surface-duration: 220ms;
  --skt-button-ease: cubic-bezier(0.33, 0.1, 0.24, 1);
  --skt-button-label: var(--skt-color-brand-ink);
  --skt-button-surface: var(--skt-color-brand-accent);
  --skt-button-border: var(--skt-color-accent-hover);
  --skt-button-surface-hover: var(--skt-color-accent-hover);
  --skt-button-border-hover: var(--skt-color-accent-hover);
  --skt-button-focus-ring: var(--skt-focus-ring-color);
  --skt-button-min-height: 52px;
  --skt-button-padding-block: var(--skt-space-4);
  --skt-button-padding-inline: var(--skt-space-6);
  --skt-button-font-size: 16px;
  --skt-button-line-height: var(--skt-space-5);
  --skt-button-roll: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-inline-size: 100%;
  min-block-size: var(--skt-button-min-height);
  padding: var(--skt-button-padding-block) var(--skt-button-padding-inline);
  border: 0;
  border-radius: var(--skt-radius-round);
  background: transparent;
  color: var(--skt-button-label);
  font-family: var(--skt-font-family-body);
  font-size: var(--skt-button-font-size);
  font-weight: 500;
  line-height: var(--skt-button-line-height);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.skt-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: var(--skt-border-width-default) solid var(--skt-button-border);
  border-radius: inherit;
  background-color: var(--skt-button-surface);
  pointer-events: none;
  transition: background-color var(--skt-button-surface-duration) var(--skt-button-ease), border-color var(--skt-button-surface-duration) var(--skt-button-ease);
}

.skt-button:hover::before,
.skt-button:focus-visible::before {
  border-color: var(--skt-button-border-hover);
  background-color: var(--skt-button-surface-hover);
}

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

.skt-button--accent {
  --skt-button-label: var(--skt-color-brand-ink);
  --skt-button-surface: var(--skt-color-brand-accent);
  --skt-button-border: var(--skt-color-accent-hover);
  --skt-button-surface-hover: var(--skt-color-accent-hover);
  --skt-button-border-hover: var(--skt-color-accent-hover);
}

.skt-button--badge {
  --skt-button-min-height: 36px;
  --skt-button-padding-block: var(--skt-space-2);
  --skt-button-padding-inline: var(--skt-space-4);
  --skt-button-font-size: 13px;
  pointer-events: none;
  cursor: inherit;
}

.skt-button__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-inline-size: 100%;
  white-space: pre-wrap;
}

.skt-button__word {
  position: relative;
  display: block;
  min-block-size: var(--skt-button-line-height);
  overflow: hidden;
}

.skt-button__out,
.skt-button__in {
  display: block;
  line-height: var(--skt-button-line-height);
  transition: transform var(--skt-button-word-duration) var(--skt-button-ease);
  transition-delay: calc(var(--skt-i, 0) * var(--skt-button-word-stagger));
}

.skt-button__out {
  transform: translateY(calc(var(--skt-button-roll) * 100%));
}

.skt-button__in {
  position: absolute;
  inset: 0;
  transform: translateY(calc((var(--skt-button-roll) - 1) * 100%));
}

.skt-button:hover,
.skt-button:focus-visible {
  --skt-button-roll: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .skt-button:hover .skt-button__out,
  .skt-button:hover .skt-button__in,
  .skt-button:focus-visible .skt-button__out,
  .skt-button:focus-visible .skt-button__in {
    will-change: transform;
  }
}
.skt-button__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .skt-button {
    --skt-button-word-duration: 1ms;
    --skt-button-word-stagger: 0ms;
    --skt-button-surface-duration: 1ms;
  }
  .skt-button__out {
    transform: translateY(0);
  }
  .skt-button__in {
    transform: translateY(-100%);
  }
}