/* Button widget: one link button. Tokens from _shared/embed.css. */

.bt-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35em;
  width: 100%;
  height: 100%;
  padding: 0 3%;
  font-size: clamp(12px, min(4.6vw, 26vh), 24px);
}

.bt-row--left {
  align-items: flex-start;
}

.bt-row--center {
  align-items: center;
}

.bt-row--right {
  align-items: flex-end;
}

.bt-row--fill {
  align-items: stretch;
  padding: 0;
}

.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 2.6em;
  padding: 0.55em 1.25em;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bt-row--fill .bt {
  flex: 1;
  min-height: 0;
  padding: 0;
}

.bt:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.bt:active {
  transform: translateY(0) scale(0.98);
}

.bt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.bt--rounded {
  border-radius: 0.6em;
}

.bt--square {
  border-radius: 0.12em;
}

.bt--soft {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.bt--outline {
  background: transparent;
  color: var(--accent);
}

.bt--soft:hover,
.bt--outline:hover {
  filter: none;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

:root[data-style="neon"] .bt {
  box-shadow: 0 0 0.6em color-mix(in srgb, var(--accent) 55%, transparent);
}

:root[data-style="neon"] .bt--outline,
:root[data-style="neon"] .bt--soft {
  text-shadow: var(--big-shadow);
}

:root[data-style="glass"] .bt--solid {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ec4899));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}

:root[data-style="retro"] .bt {
  border-radius: 0.15em;
  font-family: var(--font-mono);
}

.bt-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  white-space: nowrap;
}

.bt-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bt-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bt.is-off {
  opacity: 0.5;
  cursor: not-allowed;
}

.bt.is-off:hover {
  filter: none;
  transform: none;
}

.bt-hint {
  font-size: 0.55em;
  text-align: center;
}