/*
 * Shared component styles for app/views/components/_dialog_footer.html.erb.
 *
 * Uses engine tokens exclusively (--spacing-*, --color-*, --font-*, --border-*).
 * Loaded from the layout via stylesheet_link_tag "components/dialog_footer".
 */

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: var(--spacing-24);
  border-top: var(--border-width-md) solid var(--border);
}

@media (min-width: 640px) {
  .dialog-footer {
    padding: var(--spacing-32) var(--spacing-56);
  }
}

.dialog-footer-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-neutral-secondary);
  transition: color var(--duration-fast) ease;
}

.dialog-footer-back:hover {
  color: var(--color-text-neutral-primary);
}

.dialog-footer-branding {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--font-size-12);
  color: var(--color-text-neutral-tertiary);
}

.dialog-footer-branding img {
  height: var(--spacing-24);
  width: auto;
}