/* @group variables */

[class*="a-btn-primary"],
[class*="a-btn-secondary"] {
--padding: 1.125rem 1.5rem;
--link-color: var(--color-white);
--link-action-color: var(--color-white);
--link-active-color: var(--color-white);

--link-font-size: 1.25rem;
--link-line-height: 1.2;

--link-font-weight: 500;
--link-font-variation-settings: "wght" 500;
}

/* @end variables */

/* @group @a-btn-primary */

[class*="a-btn-primary"],
[class*="a-btn-secondary"]>span {
box-sizing: border-box;
display: grid;
justify-content: center;
align-items: center;
min-width: fit-content;
padding: var(--padding);
background-color: var(--color-brand);
border: 1px solid var(--color-brand);
box-shadow: 0 1px .375rem hsla(220, 5%, 20%, .125);
border-radius: 99rem;
color: var(--color-white);
text-align: center;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: var(--transition);
}

[class*="a-btn-secondary"]>span {
transition: inherit;
}

[class*="a-btn-primary"],
[class*="a-btn-primary"]:hover,
[class*="a-btn-primary"]:focus,
[class*="a-btn-primary"]:active,
[class*="a-btn-secondary"]>span,
[class*="a-btn-secondary"]:hover>span,
[class*="a-btn-secondary"]:focus>span,
[class*="a-btn-secondary"]:active>span {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

[class*="a-btn-primary"]:hover,
[class*="a-btn-primary"]:focus,
[class*="a-btn-secondary"]:hover>span,
[class*="a-btn-secondary"]:focus>span {
background-color: var(--color-white);
border-color: var(--color-brand-action);
box-shadow: 0 1px .5625rem hsla(220, 5%, 20%, .1875);
color: var(--color-brand-action);
}

[class*="a-btn-primary"]:active,
[class*="a-btn-secondary"]:active>span {
background-color: var(--color-white);
border-color: var(--color-brand-active);
box-shadow: 0 1px .75rem hsla(220, 5%, 20%, .25);
color: var(--color-brand-active);
}

/* @end @a-btn-primary */