/* Shared action-button behavior. Pages own palette, radius and typography via variables. */
.fc-button,
.fc-button-behavior {
  box-sizing: border-box;
  min-height: var(--fc-touch-target, 44px);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -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)),
    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-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-button-gap, 8px);
  margin: 0;
  padding: var(--fc-button-padding, 0 18px);
  border: 1px solid var(--fc-button-border, transparent);
  border-radius: var(--fc-button-radius, 4px);
  background: var(--fc-button-surface, transparent);
  color: var(--fc-button-color, currentColor);
  font: inherit;
  text-align: center;
  text-decoration: none;
}

.fc-button:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
  border-color: var(--fc-button-hover-border, var(--fc-button-border, transparent));
  background-color: var(--fc-button-hover-surface, var(--fc-button-surface, transparent));
  color: var(--fc-button-hover-color, var(--fc-button-color, currentColor));
}

:is(.fc-button, .fc-button-behavior):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--fc-button-focus-surface, #f1eee7),
    0 0 0 4px var(--fc-button-focus, rgba(161, 35, 35, .42));
}

:is(.fc-button, .fc-button-behavior):active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(var(--fc-motion-press-scale, .96));
}

:is(.fc-button, .fc-button-behavior):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: var(--fc-button-disabled-opacity, .52);
}

.fc-button--primary {
  --fc-button-border: var(--fc-button-primary-border, #24211d);
  --fc-button-surface: var(--fc-button-primary-surface, #24211d);
  --fc-button-color: var(--fc-button-primary-color, #fff);
  --fc-button-hover-border: var(--fc-button-primary-hover-border, var(--fc-button-primary-border, #24211d));
  --fc-button-hover-surface: var(--fc-button-primary-hover-surface, #171713);
  --fc-button-hover-color: var(--fc-button-primary-hover-color, var(--fc-button-primary-color, #fff));
}

.fc-button--secondary {
  --fc-button-border: var(--fc-button-secondary-border, rgba(36, 33, 29, .18));
  --fc-button-surface: var(--fc-button-secondary-surface, transparent);
  --fc-button-color: var(--fc-button-secondary-color, currentColor);
  --fc-button-hover-border: var(--fc-button-secondary-hover-border, var(--fc-button-secondary-border, rgba(36, 33, 29, .18)));
  --fc-button-hover-surface: var(--fc-button-secondary-hover-surface, rgba(247, 245, 237, .62));
  --fc-button-hover-color: var(--fc-button-secondary-hover-color, var(--fc-button-secondary-color, currentColor));
}

.fc-button--text {
  --fc-button-padding: 0;
  --fc-button-border: transparent;
  --fc-button-surface: transparent;
  --fc-button-hover-border: transparent;
  --fc-button-hover-surface: transparent;
}

.fc-button--danger {
  --fc-button-color: var(--fc-button-danger-color, #9d3932);
  --fc-button-hover-color: var(--fc-button-danger-hover-color, #a12323);
  --fc-button-hover-border: var(--fc-button-danger-hover-border, rgba(161, 35, 35, .34));
  --fc-button-hover-surface: var(--fc-button-danger-hover-surface, rgba(161, 35, 35, .055));
}

.fc-button > .fc-icon {
  flex: none;
  color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  :is(.fc-button, .fc-button-behavior) {
    transition-duration: var(--fc-motion-instant, .001ms) !important;
  }
}