/* @group variables */

[class*="a-link-btn"] {
--grid-template-columns: 1fr 1.5rem auto 1.5rem 1fr;
--gap: .75rem;
--link-height: 3rem;
--padding: 0 .75rem;
--link-border-radius: .375rem;
--icon-width: 1.875rem;
--icon-height: 1.875rem;

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

--link-font-size: .75rem;
--link-line-height: 1.5;
}

[class*="a-link-btn"] {

--link-background-color: var(--color-white);
--link-background-color: hsl(220, 5%, 97.5%);
--link-box-shadow: inset 0 0 0 1px var(--color-very-light-gray); 
--link-color: var(--color-text);

--link-action-background-color: var(--color-white);
--link-action-box-shadow: inset 0 0 0 1px var(--color-premier-action);
--link-action-color: var(--color-premier-action);

--link-active-background-color: var(--color-white);
--link-active-box-shadow: inset 0 0 0 1px var(--color-premier-active);
--link-active-color: var(--color-premier-active);
}

/* @end variables */

/* @group @a-link-btn */

[class*="a-link-btn"] {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: var(--grid-template-columns);
gap: var(--gap);
}


[class*="a-link-btn"] svg {
grid-column: 2;
grid-row: 1;
}

[class*="a-link-btn"] span {
grid-column: 3;
grid-row: 1;
}

/* @end @a-link-btn */

/* @group @a-link-btn */

[class*="a-link-btn"] {
box-sizing: border-box;
position: relative;
z-index: 2;
}

/* @end @a-link-btn */