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

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

  font-size: s360-scss-toolkit.linear-scale(s360-scss-toolkit.modular-scale(0), s360-scss-toolkit.modular-scale(1));
  background-color: var(--cta-primary--bg-color);
  border: 1px solid var(--cta-primary--border--color);
  color: var(--cta-primary--color);
  text-decoration: none;
  padding: 0.7em;
  border-radius: var(--cta-primary--border-radius);

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

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