/* Sliding label + skewed fill, shared with components/ui/button-6.tsx. */
.slide-button {
  --slide-accent: var(--electric2, #5b91ce);
  --slide-fill: #295e99;
  --slide-ink: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--slide-accent) !important;
  border-radius: 6px;
  background: linear-gradient(110deg, #101b29, #243b55) !important;
  color: #fff !important;
  box-shadow: none !important;
  min-height: 44px;
  transition: border-color 250ms, box-shadow 250ms;
}
.slide-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--slide-fill);
  transform: translateY(110%) skewY(12deg) scaleY(0);
  transition: transform 500ms ease;
}
.slide-button > .slide-button__label {
  display: block;
  position: relative;
  font: inherit !important;
  line-height: inherit !important;
  transition: transform 500ms ease, opacity 350ms;
  pointer-events: none;
}
.slide-button > .slide-button__hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  color: var(--slide-ink);
  font: inherit !important;
  letter-spacing: inherit;
  text-align: center;
  transform: translateY(110%);
  transition: transform 500ms ease;
  pointer-events: none;
}
.slide-button__hover::after { content: attr(data-label); }
.slide-button:focus-visible:not(:disabled)::before,
.slide-button:active:not(:disabled)::before { transform: translateY(0) skewY(12deg) scale(1.5); }
.slide-button:focus-visible:not(:disabled) > .slide-button__label,
.slide-button:active:not(:disabled) > .slide-button__label { transform: translateY(-150%); opacity: 0; }
.slide-button:focus-visible:not(:disabled) > .slide-button__hover,
.slide-button:active:not(:disabled) > .slide-button__hover { transform: translateY(0); }
@media (hover: hover) {
  .slide-button:hover:not(:disabled)::before { transform: translateY(0) skewY(12deg) scale(1.5); }
  .slide-button:hover:not(:disabled) > .slide-button__label { transform: translateY(-150%); opacity: 0; }
  .slide-button:hover:not(:disabled) > .slide-button__hover { transform: translateY(0); }
}
.slide-button:focus-visible { outline: 2px solid var(--slide-accent); outline-offset: 4px; }
.slide-button:disabled { opacity: .45; cursor: not-allowed; }
.slide-button:is(.active, .is-active, [aria-pressed=true], [aria-current=page]) { background: var(--slide-fill) !important; }
/* The podcast keeps its gold, including the On air navigation link. */
.slide-button[data-slide-theme=yellow] {
  --slide-accent: #f5c542;
  --slide-fill: #f5c542;
  --slide-ink: #10151c;
  background: linear-gradient(110deg, #292619, #57451b) !important;
}
.slide-button[data-slide-theme=yellow]:is(.active, .is-active, [aria-pressed=true], [aria-current=page]) { color: #10151c !important; }
.desktop-nav .slide-button { padding: 10px 12px; display: inline-flex; align-items: center; justify-content: center; }
/* Preserve rich calendar layouts and the compact phone navigation. */
.slide-button--surface > * { position: relative; }
.slide-button--surface { transition: border-color 250ms, color 250ms; }
.slide-button--surface::before { opacity: .25; }
.slide-button.calendar-day { border-width: 1px !important; }
.slide-button.calendar-day.is-selected { box-shadow: inset 0 0 0 2px var(--slide-accent) !important; }
.slide-button.calendar-agenda-item { border-left-width: 4px !important; }
.slide-button.category { min-height: 48px; }
.podcast .slide-button { min-height: 48px; padding: 13px 20px; }
@media (max-width: 600px) {
  .bottom-nav-link.slide-button { min-height: 44px; border-width: 1px !important; border-radius: 999px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide-button, .slide-button::before, .slide-button > .slide-button__label, .slide-button > .slide-button__hover { transition: none; }
  .slide-button > .slide-button__label { transform: none !important; opacity: 1 !important; }
  .slide-button > .slide-button__hover { display: none; }
  .slide-button[data-slide-theme=yellow]:is(:focus-visible,:active) { color: #10151c !important; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .slide-button[data-slide-theme=yellow]:hover:not(:disabled) { color: #10151c !important; }
}