/* Adapted interaction patterns: https://www.interior.dev/docs */
.button-labels {
  display: grid;
}

.button-labels > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 140ms ease, transform 180ms ease;
}

.state-button[data-feedback="idle"] [data-label-state="idle"],
.state-button[data-feedback="pending"] [data-label-state="pending"],
.state-button[data-feedback="success"] [data-label-state="success"],
.state-button[data-feedback="error"] [data-label-state="error"] {
  opacity: 1;
  transform: translateY(0);
}

.state-button[data-feedback="pending"] {
  cursor: progress;
}

.segmented-tabs {
  position: relative;
  isolation: isolate;
}

.segmented-tabs::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc((100% - 8px) / var(--segment-count));
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 65%);
  transform: translateX(calc(var(--segment-index) * 100%));
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  pointer-events: none;
}

.segmented-tabs .radio-tab.active,
.segmented-tabs .radio-tab:hover,
.segmented-tabs .radio-tab:focus-visible {
  background: transparent;
}

.segmented-tabs .radio-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -5px;
}

.station-copy[data-feedback="success"] { color: var(--green); }
.station-copy[data-feedback="error"] { color: var(--red); }
.station-copy[data-feedback="pending"] { cursor: progress; }
.station-copy .feedback-icon { width: 19px; height: 19px; }
.station-copy svg.feedback-icon,
.station-copy svg.feedback-icon path {
  fill: none !important;
  stroke: currentColor !important;
}

.state-button,
.station-action {
  transition: color 140ms ease, transform 120ms ease;
}

.state-button:active:not(:disabled),
.station-action:active:not(:disabled) {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .button-labels > span,
  .segmented-tabs::before,
  .state-button,
  .station-action {
    transition: none;
  }
  .state-button:active:not(:disabled),
  .station-action:active:not(:disabled) { transform: none; }
}