/* @group @variables */

:root {
--btn-border-width: 1px;
}

/* @end @variables */

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

/* @group variables */

:root {
--btn-background-color: hsla(129, 71%, 45%, 1);
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-white-active);
--btn-disabled-background-color: var(--color-white-disabled);
--btn-border-color: hsla(129, 71%, 45%, 1);
--btn-border-action-color: hsla(129, 71%, 45%, 1);
--btn-border-active-color: hsla(129, 71%, 35%, 1);
--btn-border-active-color: hsla(129, 71%, 45%, .5);

--btn-text-color: var(--color-white);
--btn-action-text-color: hsla(129, 71%, 45%, 1);
--btn-active-text-color: hsla(129, 71%, 35%, 1);
--btn-disabled-text-color: hsla(129, 71%, 45%, .5);
--btn-border-radius: 99rem;
}

[class*="a-provide-link"],
[class*="a-provide-btn"] {
--icon-before: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon-link%3C/title%3E%3Cpath fill='hsl(0, 0%, 27%)' fill-rule='evenodd' d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm-1.106 6.004H6.996a.5.5 0 0 0-.323.882l6.049 5.118-6.049 5.118a.501.501 0 0 0 .323.882h3.898a.5.5 0 0 0 .335-.129l6.102-5.5a.5.5 0 0 0 0-.742l-6.102-5.5a.5.5 0 0 0-.335-.129z'/%3E%3C/svg%3E");
}

[class*="a-provide-link"] {
--btn-offer-min-height: 2.25rem;
--btn-offer-padding: 0 1.125rem;
--btn-offer-font-weight: var(--text-font-weight);
--btn-offer-font-size: 1rem;
--btn-offer-line-height: 1.5;
}

[class*="a-provide-btn"] {
--btn-offer-min-height: 4.125rem;
--btn-offer-padding: .375rem 1.5rem;
--btn-offer-font-weight: var(--text-font-weight-bold);
--btn-offer-font-size: 1.25rem;
--btn-offer-font-size: clamp(4vw, 1.125rem, 5.25vw);
--text-block-line-height: 1.5;
}

@media all and (min-width: 30em) {

[class*="a-provide-btn"] {
--btn-offer-font-size: 1.5rem;
--text-block-line-height: 1.5;
}

}

/* @end variables */

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

[class*="a-provide-link"],
[class*="a-provide-btn"] {
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 1;
display: grid;
justify-content: center;
align-items: center;
align-content: center;
grid-template-columns: var(--btn-grid-template-columns);
gap: var(--btn-offer-gap);
min-height: var(--btn-offer-min-height);
padding: var(--btn-offer-padding);
background-color: var(--btn-background-color);
border: 1px solid var(--btn-border-color);
box-shadow: var(--btn-box-shadow);
border-radius: var(--btn-border-radius);
font-size: var(--btn-offer-font-size);
line-height: var(--btn-offer-line-height);
font-weight: var(--btn-offer-font-weight);
color: var(--btn-text-color);
text-align: center;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: var(--link-transition);
}

[class*="a-provide-link"] span,
[class*="a-provide-btn"] span {
grid-column: var(--btn-text-column);
grid-row: var(--btn-text-row);
}

[class*="a-provide-link"]:before,
[class*="a-provide-btn"]:before {
content: var(--btn-before-content);
grid-column: var(--btn-before-column);
grid-row: var(--btn-before-row);
display: flex;
justify-content: center;
align-items: center;
width: var(--btn-before-after-size);
height: var(--btn-before-after-size);
background-color: var(--btn-before-background-color);
-webkit-mask-image: var(--icon-before);
mask-image: var(--icon-before);
-webkit-mask-size: var(--btn-before-after-size);
mask-size: var(--btn-before-after-size);
}

[class*="a-provide-link"]:after,
[class*="a-provide-btn"]:after {
content: var(--btn-after-content);
grid-column: var(--btn-after-column);
grid-row: var(--btn-after-row);
display: flex;
justify-content: center;
align-items: center;
width: var(--btn-before-after-size);
height: var(--btn-before-after-size);
background-color: var(--btn-after-background-color);
-webkit-mask-image: var(--icon-after);
mask-image: var(--icon-after);
-webkit-mask-size: var(--btn-before-after-size);
mask-size: var(--btn-before-after-size);
}

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

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

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

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

[class*="a-provide-link"]:disabled,
button:disabled [class*="a-provide-link"],
[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-link */

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

/* @group variables */



/* @end variables */

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



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

/* @group variables */

/* .a-provide-btn-proto,
.a-provide-link-proto {
--btn-background-color: var(--color-white);
--btn-action-background-color: var(--color-very-dark-gray);
--btn-active-background-color: var(--color-very-dark-gray-active);
--btn-disabled-background-color: var(--color-very-dark-gray-disabled);

--btn-border-color: var(--color-very-dark-gray);
--btn-border-action-color: var(--color-white);
--btn-border-active-color: var(--color-white-active);
--btn-border-active-color: var(--color-white-disabled);

--btn-text-color: var(--color-very-dark-gray);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white-active);
--btn-disabled-text-color: var(--color-white-disabled);
} */

/* @end variables */

/* @group variables */

/* .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: var(--color-brand-disabled);

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

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

/* @end variables */

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

/* @group variables */

/* .a-provide-btn-primero,
.a-provide-link-primero {
--btn-background-color: var(--color-very-dark-gray);
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-white-active);
--btn-disabled-background-color: var(--color-white-disabled);

--btn-border-color: var(--color-very-dark-gray);
--btn-border-action-color: var(--color-very-dark-gray);
--btn-border-active-color: var(--color-very-dark-gray-active);
--btn-border-active-color: var(--color-very-dark-gray-disabled);

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-very-dark-gray);
--btn-active-text-color: var(--color-very-dark-gray-active);
--btn-disabled-text-color: var(---color-very-dark-gray-disabled);
} */

/* @end variables */

/* @group variables */

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

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

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

/* @end variables */

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

/* @group variables */

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

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-very-dark-gray);
--btn-active-text-color: var(--color-very-dark-gray-active);
--btn-disabled-text-color: var(--color-very-dark-gray-disabled);
} */

/* @end variables */