/* Shared public action affordances.
   Keep this file small: product surfaces may opt in one primitive at a time. */

.at-forward-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.at-forward-link:hover {
  color: var(--text);
  text-decoration: none;
}

.at-forward-link:focus-visible {
  outline: 2px solid var(--public-action-arrow, var(--primary));
  outline-offset: 2px;
}

.at-forward-link--button,
.at-forward-link--row,
.at-forward-link--card,
.at-forward-link--chip {
  border: 1px solid var(--at-forward-link-border);
  background: var(--at-forward-link-bg);
  color: var(--at-forward-link-text);
  box-shadow: var(--at-forward-link-shadow);
}

.at-forward-link--button:hover,
.at-forward-link--row:hover,
.at-forward-link--card:hover,
.at-forward-link--chip:hover {
  border-color: var(--at-forward-link-border-hover);
  background: var(--at-forward-link-bg-hover);
  color: var(--at-forward-link-text);
  box-shadow: var(--at-forward-link-shadow-hover);
  transform: var(--at-forward-link-transform-hover);
}

.at-forward-link--button:focus-visible,
.at-forward-link--row:focus-visible,
.at-forward-link--card:focus-visible,
.at-forward-link--chip:focus-visible {
  outline: 2px solid var(--public-action-arrow, var(--primary));
  outline-offset: 2px;
  box-shadow: var(--at-forward-link-focus-ring);
}

.at-forward-link--button {
  --at-forward-link-bg: var(--public-action-bg, var(--surface-elevated, var(--surface)));
  --at-forward-link-bg-hover: var(--public-action-bg-hover, var(--control-bg-hover, var(--surface)));
  --at-forward-link-border: var(--public-action-border, var(--border));
  --at-forward-link-border-hover: var(--public-action-border-hover, var(--primary));
  --at-forward-link-text: var(--text);
  --at-forward-link-shadow: var(--public-action-shadow, none);
  --at-forward-link-shadow-hover: var(--public-action-shadow-hover, 0 0 0 1px rgba(var(--primary-rgb), 0.28));
  --at-forward-link-focus-ring: var(--public-action-focus-ring, 0 0 0 4px rgba(var(--primary-rgb), 0.22));
  --at-forward-link-transform-hover: translateY(-1px);
  --at-forward-link-button-bg: var(--at-forward-link-bg);
  --at-forward-link-button-bg-hover: var(--at-forward-link-bg-hover);
  --at-forward-link-button-border: var(--at-forward-link-border);
  --at-forward-link-button-border-hover: var(--at-forward-link-border-hover);
  --at-forward-link-button-text: var(--text);
  --at-forward-link-button-shadow-hover: var(--at-forward-link-shadow-hover);
  --at-forward-link-button-focus-ring: var(--at-forward-link-focus-ring);
  --at-forward-link-arrow-color: var(--public-action-arrow, var(--primary));
  --at-forward-link-arrow-opacity: var(--public-action-arrow-opacity, 0.86);
  --at-forward-link-arrow-hover-opacity: 1;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 650;
}

.at-forward-link--row {
  --at-forward-link-bg: var(--public-action-bg, var(--surface, transparent));
  --at-forward-link-bg-hover: var(--public-action-bg-hover, var(--surface-elevated, var(--surface)));
  --at-forward-link-border: var(--public-action-border, var(--border));
  --at-forward-link-border-hover: var(--public-action-border-hover, var(--primary));
  --at-forward-link-text: var(--text);
  --at-forward-link-shadow: var(--public-action-shadow, none);
  --at-forward-link-shadow-hover: var(--public-action-shadow-hover, 0 0 0 1px rgba(var(--primary-rgb), 0.26));
  --at-forward-link-focus-ring: var(--public-action-focus-ring, 0 0 0 4px rgba(var(--primary-rgb), 0.20));
  --at-forward-link-transform-hover: none;
  --at-forward-link-arrow-color: var(--public-action-arrow, var(--primary));
  --at-forward-link-arrow-opacity: var(--public-action-arrow-opacity, 0.82);
  --at-forward-link-arrow-hover-opacity: 1;
  border-radius: 10px;
}

.at-forward-link--card {
  --at-forward-link-bg: var(--public-action-bg, var(--surface, transparent));
  --at-forward-link-bg-hover: var(--public-action-bg-hover, var(--surface-elevated, var(--surface)));
  --at-forward-link-border: var(--public-action-border, var(--border));
  --at-forward-link-border-hover: var(--public-action-border-hover, var(--primary));
  --at-forward-link-text: var(--text);
  --at-forward-link-shadow: var(--public-action-shadow, none);
  --at-forward-link-shadow-hover: var(--public-action-shadow-hover, 0 0 0 1px rgba(var(--primary-rgb), 0.28));
  --at-forward-link-focus-ring: var(--public-action-focus-ring, 0 0 0 4px rgba(var(--primary-rgb), 0.22));
  --at-forward-link-transform-hover: translateY(-1px);
  --at-forward-link-arrow-color: var(--public-action-arrow, var(--primary));
  --at-forward-link-arrow-opacity: var(--public-action-arrow-opacity, 0.84);
  --at-forward-link-arrow-hover-opacity: 1;
  border-radius: 12px;
}

.at-forward-link--chip {
  --at-forward-link-bg: var(--public-action-bg, var(--surface, transparent));
  --at-forward-link-bg-hover: var(--public-action-bg-hover, var(--surface-elevated, var(--surface)));
  --at-forward-link-border: var(--public-action-border, var(--border));
  --at-forward-link-border-hover: var(--public-action-border-hover, var(--primary));
  --at-forward-link-text: var(--text);
  --at-forward-link-shadow: var(--public-action-shadow, none);
  --at-forward-link-shadow-hover: var(--public-action-shadow-hover, 0 0 0 1px rgba(var(--primary-rgb), 0.26));
  --at-forward-link-focus-ring: var(--public-action-focus-ring, 0 0 0 4px rgba(var(--primary-rgb), 0.20));
  --at-forward-link-transform-hover: none;
  --at-forward-link-arrow-color: var(--public-action-arrow, var(--primary));
  --at-forward-link-arrow-opacity: var(--public-action-arrow-opacity, 0.82);
  --at-forward-link-arrow-hover-opacity: 1;
  border-radius: 999px;
}

.at-forward-link__body {
  min-width: 0;
}

.at-forward-link__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 8px;
  color: var(--at-forward-link-arrow-color, var(--public-action-arrow, var(--primary)));
  font-weight: 800;
  line-height: 1;
  opacity: var(--at-forward-link-arrow-opacity, 0.72);
  transform: translateX(0);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.at-forward-link:hover .at-forward-link__arrow,
.at-forward-link:focus-visible .at-forward-link__arrow {
  opacity: var(--at-forward-link-arrow-hover-opacity, 1);
  transform: translateX(2px);
}

html[data-theme="light"] .at-forward-link--button,
html[data-theme="light"] .at-forward-link--row,
html[data-theme="light"] .at-forward-link--card,
html[data-theme="light"] .at-forward-link--chip {
  --at-forward-link-arrow-color: var(--public-action-arrow, var(--primary));
  --at-forward-link-arrow-opacity: var(--public-action-arrow-opacity, 1);
}

html[data-theme="soft"] .at-forward-link--button {
  --at-forward-link-bg: var(--public-action-bg, var(--surface-elevated, var(--surface)));
  --at-forward-link-bg-hover: var(--public-action-bg-hover, var(--control-bg-hover, var(--surface-elevated, var(--surface))));
  --at-forward-link-border-hover: var(--public-action-border-hover, var(--primary));
  --at-forward-link-shadow-hover: var(--public-action-shadow-hover, 0 0 0 1px rgba(var(--primary-rgb), 0.18));
  --at-forward-link-focus-ring: var(--public-action-focus-ring, 0 0 0 4px rgba(var(--primary-rgb), 0.18));
  --at-forward-link-button-bg: var(--at-forward-link-bg);
  --at-forward-link-button-bg-hover: var(--at-forward-link-bg-hover);
  --at-forward-link-button-border-hover: var(--at-forward-link-border-hover);
  --at-forward-link-button-shadow-hover: var(--at-forward-link-shadow-hover);
  --at-forward-link-button-focus-ring: var(--at-forward-link-focus-ring);
  --at-forward-link-arrow-color: var(--public-action-arrow, var(--primary));
  --at-forward-link-arrow-opacity: var(--public-action-arrow-opacity, 1);
}

html[data-theme="soft"] .at-forward-link--row,
html[data-theme="soft"] .at-forward-link--card,
html[data-theme="soft"] .at-forward-link--chip {
  --at-forward-link-bg: var(--public-action-bg, var(--surface-elevated, var(--surface)));
  --at-forward-link-bg-hover: var(--public-action-bg-hover, var(--surface-elevated, var(--surface)));
  --at-forward-link-border-hover: var(--public-action-border-hover, var(--primary));
  --at-forward-link-shadow-hover: var(--public-action-shadow-hover, 0 0 0 1px rgba(var(--primary-rgb), 0.18));
  --at-forward-link-focus-ring: var(--public-action-focus-ring, 0 0 0 4px rgba(var(--primary-rgb), 0.18));
  --at-forward-link-arrow-color: var(--public-action-arrow, var(--primary));
  --at-forward-link-arrow-opacity: var(--public-action-arrow-opacity, 1);
}