// Styles for UpdateBanner — a discreet, dismissible strip above the routed
// page content (see AppLayout.tsx). Uses --color-warning the same way
// source-item-preview__hint does elsewhere in the app: "worth noticing",
// not an error.
.update-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);

  &__text {
    color: var(--color-text);
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
  }

  &__update {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-primary);
    color: var(--color-surface);
    border-radius: var(--radius-base);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  &__dismiss {
    padding: var(--space-xs) var(--space-sm);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;

    &:hover {
      color: var(--color-text);
    }
  }
}