/* @group @variables */

:root {
--btn-box-shadow-color-hue: 220;
--btn-box-shadow-color-saturation: 10%;
--btn-box-shadow-color-lightness: 50%;
--btn-border-width: var(--link-border-size);

--btn-background-color: var(--color-brand);
--btn-background-color-gradient:linear-gradient(to right, hsl(180, 80%, 40%), hsl(185, 50%, 50%), hsl(180, 70%, 55%), hsl(175, 60%, 40%));

--btn-action-background-color: var(--color-brand-action);
--btn-active-background-color: var(--color-brand-active);
--btn-disabled-background-color: var(--color-brand-disabled);

--btn-border-color: var(--color-brand);
--btn-border-action-color: var(--color-brand-action-border);
--btn-border-active-color: var(--color-brand-active-border);
--btn-border-disabled-color: var(--color-brand-disabled);

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white);
--btn-disabled-text-color: var(--color-white-disabled);
}

[class*="a-provide-link-secondary"] {
--btn-box-shadow-color-hue: 220;
--btn-box-shadow-color-saturation: 10%;
--btn-box-shadow-color-lightness: 50%;
--btn-border-width: var(--link-border-size);

--btn-background-color: transparent;
--btn-background-color-gradient:none;


--btn-action-background-color: var(--color-brand-action);
--btn-active-background-color: var(--color-brand-active);
--btn-disabled-background-color: var(--color-brand-disabled);

--btn-border-color: var(--color-brand);
--btn-border-action-color: var(--color-brand-action-border);
--btn-border-active-color: var(--color-brand-active-border);
--btn-border-disabled-color: var(--color-brand-disabled);

--btn-text-color: var(--color-brand);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white);
--btn-disabled-text-color: var(--color-white-disabled);
}

/* @end @variables */

/* offer-button --------------------------------------------------------*/

/* @group Variables */

:root {
--btn-offer-link-height: 2.25rem;
--btn-offer-link-font-weight: 500;
}

/* @end Variables */

/* @group @a-provide-link */

[class*="a-provide-link"] {
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 1;

display: grid;
place-items: var(--place-items-center-primary);
height: var(--btn-offer-link-height);
background-color: var(--btn-background-color);
border: var(--btn-link-border-width) solid var(--btn-border-color);
border-radius: 99rem;
box-shadow: 0 0 .5625rem hsla(var(--btn-box-shadow-color-hue), var(--btn-box-shadow-color-saturation), var(--btn-box-shadow-color-lightness), var(--alpha-shadow-action));
color: var(--btn-text-color);
font-weight: var(--btn-offer-link-font-weight);
white-space: nowrap;
transition: inherit;
}

[class*="a-provide-link"]:hover,
[class*="a-provide-link"]:focus,
a:hover [class*="a-provide-link"],
a:focus [class*="a-provide-link"] {
background-color: var(--btn-action-background-color);
border-color: var(--btn-border-action-color);
box-shadow: 0 0 .75rem hsla(var(--btn-box-shadow-color-hue), var(--btn-box-shadow-color-saturation), var(--btn-box-shadow-color-lightness), var(--alpha-shadow-action));
color: var(--btn-action-text-color);
}


[class*="a-provide-link"]:active,
a:active [class*="a-provide-link"] {
background-color: var(--btn-active-background-color);
border-color: var(--btn-border-active-color);
box-shadow: 0 0 1.125rem hsla(var(--btn-box-shadow-color-hue), var(--btn-box-shadow-color-saturation), var(--btn-box-shadow-color-lightness) , var(--alpha-shadow-active));
color: var(--btn-active-text-color);
}

[class*="a-provide-link"]:disabled,
button:disabled [class*="a-provide-link"] {
background-color: var(--btn-disabled-background-color);
border-color: var(--btn-border-disabled-color);
color: var(--btn-disabled-text-color);
pointer-events: none;
cursor: not-allowed;
}

/* @end @a-provide-link */



/* offer-button --------------------------------------------------------*/

/* @group Variables */

:root {
--btn-offer-height: 4.5rem;
--btn-offer-padding-right: var(--btn-offer-padding-secondary);
--btn-offer-padding-left: var(--btn-offer-padding-secondary);
--btn-offer-font-size: 100%;
--btn-offer-line-height: var(--line-height-quaternary);
--btn-offer-primary-label-font-size: 1.125rem;
--btn-offer-primary-label-line-height: var(--line-height-ecto);
--btn-offer-sub-label-font-size: .875rem;
--btn-offer-sub-label-line-height: 1.714285714;
--btn-offer-gap: .1875rem;
}

/* @end Variables */

/* @group @a-provide-btn */

[class*="a-provide-btn"] {
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 1;
display: grid;
align-content: center;
gap: var(--btn-offer-gap);
height: var(--btn-offer-height);
box-shadow: 0 0 .5625rem hsla(var(--btn-box-shadow-color-hue), var(--btn-box-shadow-color-saturation), var(--btn-box-shadow-color-lightness), var(--alpha-shadow));
border-radius: 99rem;
color: var(--btn-text-color);
text-align: center;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: var(--link-transition);
}

[class*="a-provide-btn"]:hover,
[class*="a-provide-btn"]:focus {
box-shadow: 0 0 .75rem hsla(var(--btn-box-shadow-color-hue), var(--btn-box-shadow-color-saturation), var(--btn-box-shadow-color-lightness), var(--alpha-shadow-action));
color: var(--btn-action-text-color);
}

[class*="a-provide-btn"]:active,
button:active [class*="a-provide-btn"] {
box-shadow: 0 0 1.125rem hsla(var(--btn-box-shadow-color-hue), var(--btn-box-shadow-color-saturation), var(--btn-box-shadow-color-lightness), var(--alpha-shadow-active));
color: var(--btn-active-text-color);
}

[class*="a-provide-btn"]:disabled,
button:disabled [class*="a-provide-btn"] {
background-color: var(--btn-disabled-background-color);
border-color: var(--btn-border-disabled-color);
color: var(--btn-disabled-text-color);
pointer-events: none;
cursor: not-allowed;
}

/* @end @a-provide-btn */

/* @group @a-provide-btn */

[class*="a-provide-btn"] {
font-family: var(--font-family-primary);
font-size: var(--btn-offer-primary-label-font-size);
line-height: var(--btn-offer-primary-label-line-height);
}

[class*="a-provide-btn"] em,
[class*="a-provide-btn"] small {
position: relative;
z-index: 3;
}

[class*="a-provide-btn"] em {
font-size: var(--btn-offer-primary-label-font-size);
line-height: var(--btn-offer-primary-label-line-height);
}

[class*="a-provide-btn"] small {
font-size: var(--btn-offer-sub-label-font-size);
line-height: var(--btn-offer-sub-label-line-height);
}

/* @end @a-provide-btn */

/* offer-button --------------------------------------------------------*/

/* @group Variables */

.a-provide-btn-proto,
.a-provide-link-proto {
--btn-background-color: var(--color-brand);
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-brand-active);
--btn-disabled-background-color: var(--color-brand-disabled);

--btn-border-color: var(--color-brand);
--btn-border-action-color: var(--color-brand-action);
--btn-border-active-color: var(--color-brand-active);
--btn-border-active-color: var(--color-brand-disabled);
}

html>body .a-provide-btn-proto,
html>body .a-provide-link-proto {
--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-brand);
--btn-active-text-color: var(--color-white);
--btn-disabled-text-color: var(--color-white-disabled);
}


.a-provide-btn-deutero,
.a-provide-link-deutero {
--btn-background-color: var(--color-white);
--btn-action-background-color: var(--color-brand);
--btn-active-background-color: var(--color-brand-active);
--btn-disabled-background-color: transparent;

--btn-border-color: var(--color-gainsboro);
--btn-border-action-color: var(--color-brand-action);
--btn-border-active-color: var(--color-brand-active);
--btn-border-active-color: var(--color-white-disabled);
}

html>body .a-provide-btn-deutero,
html>body .a-provide-link-deutero {
--btn-text-color: var(--color-brand);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white);
--btn-disabled-text-color: var(--color-disabled);
}

.a-provide-btn-trito,
.a-provide-link-trito {
--btn-background-color: transparent;
--btn-action-background-color: var(--color-white-action);
--btn-active-background-color: var(--color-white-active);
--btn-disabled-background-color: transparent;

--btn-border-color: var(--color-white);
--btn-border-action-color: var(--color-white-action);
--btn-border-active-color: var(--color-white-active);
--btn-border-active-color: var(--color-white-disabled);
}

html>body .a-provide-btn-trito,
html>body .a-provide-link-trito {
--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-brand);
--btn-active-text-color: var(--color-brand);
--btn-disabled-text-color: var(--color-white-disabled);
}

/* @end Variables */

/* @group Variables */

.a-provide-link-primero {

--btn-background-color: var(--color-secondary);
--btn-background-color-gradient:linear-gradient(to right, hsl(180, 80%, 40%), hsl(185, 50%, 50%), hsl(180, 70%, 55%), hsl(175, 60%, 40%));

--btn-action-background-color: var(--color-secondary-action);
--btn-active-background-color: var(--color-secondary-active);
--btn-disabled-background-color: var(--color-secondary-disabled);

--btn-border-color: var(--color-secondary);
--btn-border-action-color: var(--color-secondary-action-border);
--btn-border-active-color: var(--color-secondary-active-border);
--btn-border-disabled-color: var(--color-secondary-disabled);

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white);
--btn-disabled-text-color: var(--color-white-disabled);
}

/* @end Variables */

/* @group @a-provide-btn */

[class*="a-provide-btn"],
[class*="a-provide-link"] {
padding: var(--btn-offer-padding);
background-color: var(--btn-background-color);
border: var(--btn-border-width) solid var(--btn-border-color);
}

[class*="a-provide-btn"] span,
[class*="a-provide-link"] span {
position: relative;
overflow: hidden;
z-index: 2;
display: grid;
align-content: center;
gap: var(--btn-offer-gap);
height: 100%;
text-align: center;
}

[class*="a-provide-btn"] span {
padding-right: var(--btn-offer-padding-right);
padding-left: var(--btn-offer-padding-left);
}

[class*="a-provide-link"] span {
padding-right: .75rem;
padding-left: .75rem;
}

[class*="a-provide-btn"]:hover,
[class*="a-provide-btn"]:focus,
a:hover [class*="a-provide-btn"],
a:focus [class*="a-provide-btn"],
[class*="a-provide-link"]:hover,
[class*="a-provide-link"]:focus,
a:hover [class*="a-provide-link"],
a:focus [class*="a-provide-link"] {
/*background-color: var(--btn-action-background-color);*/
background: transparent;
}

[class*="a-provide-btn"]:active,
button:active [class*="a-provide-btn"],
[class*="a-provide-link"]:active,
button:active [class*="a-provide-link"]{
background-color: var(--btn-active-background-color);
border-color: var(--btn-border-active-color);
}

[class*="a-provide-btn"]:after,
[class*="a-provide-link"]:after {
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--btn-action-background-color);
transform: scale(0, 1) translateZ(0);
transform-origin: top right;
transition: transform .3s;
}

[class*="a-provide-btn"]:hover:after,
[class*="a-provide-btn"]:focus:after,
a:hover [class*="a-provide-btn"]:after,
a:focus [class*="a-provide-btn"]:after,
[class*="a-provide-link"]:hover:after,
[class*="a-provide-link"]:focus:after,
a:hover [class*="a-provide-link"]:after,
a:focus [class*="a-provide-link"]:after {
transform: scale(1, 1) translateZ(0);
transform-origin: top left;
}

[class*="a-provide-btn"]:active:after,
a:active [class*="a-provide-btn"]:after,
[class*="a-provide-link"]:active:after,
a:active [class*="a-provide-link"]:after {
transform: scale(0, 1) translateZ(0);
transform-origin: top right;
}

/* @end @a-provide-btn */