/* Shared in-page selection controls. Business state remains page-owned. */
.fc-selection-control {
  position: relative;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--fc-selection-color, rgba(58, 55, 50, .72));
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--fc-motion-state, 180ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1)),
    background-color var(--fc-motion-state, 180ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1)),
    border-color var(--fc-motion-state, 180ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1)),
    box-shadow var(--fc-motion-state, 180ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1)),
    transform var(--fc-motion-fast, 150ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1));
}

.fc-selection-control:is(:hover, :focus-visible) {
  color: var(--fc-selection-active-color, rgba(36, 33, 29, .96));
  outline: none;
}

.fc-selection-control:focus-visible {
  box-shadow: 0 0 0 2px var(--fc-selection-focus, rgba(161, 35, 35, .42));
}

.fc-selection-control:active {
  transform: scale(var(--fc-motion-press-scale, .96));
}

.fc-selection-control--card {
  min-height: var(--fc-touch-target, 44px);
  border-radius: var(--fc-selection-card-radius, 11px);
}

.fc-selection-control--card:focus-visible {
  box-shadow: 0 0 0 2px var(--fc-selection-focus-surface, #f1eee7), 0 0 0 4px var(--fc-selection-focus, rgba(161, 35, 35, .42));
}

.fc-segmented-control {
  --fc-selection-selected-surface: rgba(255, 255, 255, .72);
  --fc-selection-selected-shadow: 0 1px 5px -1px rgba(44, 40, 32, .16);
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 10px;
  background: rgba(239, 234, 226, .54);
}

.fc-segmented-control > .fc-selection-control {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
}

.fc-segmented-control > .fc-selection-control::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--fc-touch-target, 44px);
  transform: translateY(-50%);
}

.fc-segmented-control > .fc-selection-control:is([aria-selected="true"], .is-selected) {
  background: var(--fc-selection-selected-surface);
  box-shadow: var(--fc-selection-selected-shadow);
  color: var(--fc-selection-active-color, rgba(36, 33, 29, .96));
}

.fc-inline-choice-group {
  display: flex;
  justify-content: center;
  gap: 26px;
}

.fc-selection-control--underline {
  min-width: 48px;
  min-height: var(--fc-touch-target, 44px);
  padding: 0;
}

.fc-selection-control--underline::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 5px;
  left: 8px;
  height: 1px;
  background: transparent;
  transform: scaleX(.25);
  opacity: 0;
  transition:
    background-color var(--fc-motion-state, 180ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1)),
    opacity var(--fc-motion-state, 180ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1)),
    transform var(--fc-motion-fast, 150ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1));
}

.fc-selection-control--underline:is([aria-pressed="true"], [aria-selected="true"], .is-selected) {
  color: var(--fc-selection-active-color, rgba(36, 33, 29, .96));
}

.fc-selection-control--underline:is([aria-pressed="true"], [aria-selected="true"], .is-selected)::after {
  background: var(--fc-selection-accent, #a12323);
  transform: scaleX(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fc-selection-control,
  .fc-selection-control--underline::after {
    transition-duration: var(--fc-motion-instant, .001ms) !important;
  }
}
