/* @group @variables */

[class*="a-favorite-toggle"] {
--favorite-width: 3rem;
--favorite-height: 3rem;
--icon-width: 1.25rem;
--icon-height: 1.25rem;
--link-background-color: transparent;
--link-action-background-color: transparent;
--link-active-background-color: transparent;
--link-icon-background-color: hsla(0, 0%, 100%, .375);
--link-icon-action-background-color: hsla(0, 0%, 100%, .75);
--link-icon-active-background-color: hsla(0, 0%, 100%, .75);
--icon-fill: var(--color-star-mask);
--favorite-icon-before-background-color: var(--color-premier);
--favorite-icon-after-background-color: var(--color-white);
}

[class*="a-favorite-toggle-primary"] {
--link-icon-border-radius: 50%;
}

[class*="a-favorite-toggle-proto"] {
--favorite-border: 1px solid var(--color-gainsboro);
--icon-width: 1.875rem;
--icon-height: 1.875rem;
}

[class*="a-favorite-toggle-primero"] {
--favorite-width: 1.125rem;
--favorite-height: 1.125rem;
--icon-width: 1.125rem;
--icon-height: 1.125rem;
--link-icon-background-color: transparent;
--link-icon-action-background-color: transparent;
--link-icon-active-background-color: transparent;
--favorite-icon-before-background-color: transparent;
--favorite-icon-after-background-color: transparent;
}

/* @end @variables */

/* @group @variables */

[class*="is-favorite-on"] {
--icon-fill: transparent;
}

[class*="is-favorite-on"] [class*="a-svg-favorite-on"] {
--icon-fill: var(--color-premier);
}

[class*="a-svg-favorite-off"] {
--icon-fill: transparent;
--icon-stroke: var(--color-text);
--icon-stroke-width: 2;
}

[class*="a-favorite-toggle-proto"] [class*="a-svg-favorite-off"] {
--icon-stroke-width: 1.5;
}

[class*="is-favorite-on"] [class*="a-svg-favorite-off"] {
--icon-stroke: transparent;
}

/* @end @variables */

/* -------------------------------------------------------- */

/* @group @a-favorite-toggle */

[class*="a-svg-favorite-on"] {
transform: scale(0);
}

[class*="is-favorite-on"] [class*="a-svg-favorite-on"] {
transform: scale(1.2);
transition: var(--transition);
}

/* @end @a-favorite-toggle */

/* @group @a-favorite-toggle */

[class*="a-favorite-toggle"] {
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 3;
display: grid;
width: var(--favorite-width);
height: var(--favorite-height);
padding: .375rem;
border: var(--favorite-border);
}

[class*="a-favorite-toggle-primero"] {
padding: 0;
border: none;
}

/* @end @a-favorite-toggle */

/* @group @a-favorite-toggle */

[class*="a-favorite-icon"] {
position: relative;
overflow: hidden;
z-index: 3;
display: grid;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: var(--link-icon-background-color);
border-radius: var(--link-icon-border-radius);
transition: var(--transition);
}

a:hover [class*="a-favorite-icon"],
button:hover [class*="a-favorite-icon"],
a:focus [class*="a-favorite-icon"],
button:focus [class*="a-favorite-icon"] {
background-color: var(--link-icon-action-background-color);
}

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

/* @end @a-favorite-toggle */

/* @group @a-favorite-toggle */

a:hover [class*="a-favorite-icon"],
button:hover [class*="a-favorite-icon"],
a:focus [class*="a-favorite-icon"],
button:focus [class*="a-favorite-icon"] {
background-color: var(--link-icon-action-background-color);
}

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

[class*="a-favorite-icon"]:before,
[class*="a-favorite-icon"]:after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: scale(0);
}

[class*="a-favorite-icon"]:before {
background-color: var(--favorite-icon-before-background-color);
}

[class*="a-favorite-icon"]:after {
background-color: var(--favorite-icon-after-background-color);
}

[class*="is-favorite-on"] [class*="a-favorite-icon"]:before {
animation: balloon .3s .2s forwards;
}

[class*="is-favorite-on"] [class*="a-favorite-icon"]:after {
animation: balloon .5s 0s forwards;
}

/* @end @a-favorite-toggle */

/* @group @balloon */

@keyframes balloon {
100% {transform:scale(2);}
}

/* @end @balloon */