/*
 * FB-06 Gate / blocked notice — app/components/ui/gate_notice_component.rb
 *
 * Same tinted-card treatment as .ui-alert--card, laid out in a column so
 * the single unblocking CTA reads as the natural next step rather than a
 * trailing action squeezed beside the text.
 */

.ui-gate-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.ui-gate-notice--accent {
  background: var(--color-accent-100);
  color: var(--color-accent-pressed);
}

.ui-gate-notice--success {
  background: var(--color-success-subtle);
  color: var(--color-success-ink);
}

.ui-gate-notice--warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning-ink);
}

.ui-gate-notice--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}

.ui-gate-notice__icon {
  display: inline-flex;
  width: var(--icon-md);
  height: var(--icon-md);
}

.ui-gate-notice__icon svg {
  display: block;
}

.ui-gate-notice__body {
  font-family: var(--font-sans);
  color: var(--color-ink);
}

.ui-gate-notice__message {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.ui-gate-notice__action {
  align-self: stretch;
}