@use "./site-config";
@use "s360-scss-toolkit";

/// Defines the styles for the secondary CTA.
///
/// @access public
///
%cta-secondary {
  --focus-visible--outline-color: var(--cta-secondary--focus-visible--outline-color, currentColor);

  background-color: var(--cta-secondary--bg-color, transparent);
  border: 1px solid var(--cta-secondary--border--color);
  color: var(--cta-secondary--color);
  text-decoration: none;
  padding: var(--cta-secondary--padding, 0.8em);
  border-radius: var(--cta-secondary--border-radius);

  &:hover,
  &:focus {
    --cta-secondary--border--color: var(--cta-secondary--border--color--active);
    --cta-secondary--border-radius: var(--cta-secondary--border-radius--active);

    background-color: var(--cta-secondary--bg-color--active, var(--cta-secondary--bg-color));
    color: var(--cta-secondary--color--active, var(--cta-secondary--color));
  }
}
