/* aspect-ratio -------------------------------------------------------- */

/* @group @variables */

[class*="a-svg-icon"],
[class*="a-svg-"] {
--icon-transition: none;
}

/* @end @variables */

/* @group @variables */

/*[class*="a-svg-inherit"] {
--icon-fill: currentColor;
}*/

/* @end @variables */

/* @group @variables */

[class*="a-svg-instagram"] {
--icon-fill: hsl(326, 57%, 48%);
}

a:hover [class*="a-svg-instagram"],
a:focus [class*="a-svg-instagram"] {
--icon-fill: hsl(326, 57%, 43%);
}

a:active [class*="a-svg-instagram"] {
--icon-fill: hsl(326, 57%, 38%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-facebook"] {
--icon-fill: hsl(214, 89%, 52%);
}

a:hover [class*="a-svg-facebook"],
a:focus [class*="a-svg-facebook"] {
--icon-fill: hsl(214, 89%, 48%);
}

a:active [class*="a-svg-facebook"] {
--icon-fill: hsl(214, 89%, 42%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-youtube"] {
--icon-fill: hsl(360, 100%, 50%);
}

a:hover [class*="a-svg-youtube"],
a:focus [class*="a-svg-youtube"] {
--icon-fill: hsl(360, 100%, 45%);
}

a:active [class*="a-svg-youtube"] {
--icon-fill: hsl(360, 100%, 40%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-twitter"] {
--icon-fill: hsl(203, 89%, 53%);
}

a:hover [class*="a-svg-twitter"],
a:focus [class*="a-svg-twitter"] {
--icon-fill: hsl(203, 89%, 48%);
}

a:active [class*="a-svg-twitter"] {
--icon-fill: hsl(203, 89%, 43%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-tiktok"] {
--icon-fill: hsl(0, 0%, 0%);
}

a:hover [class*="a-svg-tiktok"],
a:focus [class*="a-svg-tiktok"] {
--icon-fill: hsl(0, 0%, 40%);
}

a:active [class*="a-svg-tiktok"] {
--icon-fill: hsl(0, 0%, 50%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-hatena"] {
--icon-fill: hsl(196, 99%, 44%);
}

a:hover [class*="a-svg-hatena"],
a:focus [class*="a-svg-hatena"] {
--icon-fill: hsl(196, 99%, 39%);
}

a:active [class*="a-svg-hatena"] {
--icon-fill: hsl(196, 99%, 34%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-website"] {
--icon-fill: hsl(328, 76%, 55%);
}

a:hover [class*="a-svg-website"],
a:focus [class*="a-svg-website"] {
--icon-fill: hsl(328, 76%, 50%);
}

a:active [class*="a-svg-website"] {
--icon-fill: hsl(328, 76%, 45%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-line"] {
--icon-fill: hsl(120, 100%, 39%);
}

a:hover [class*="a-svg-line"],
a:focus [class*="a-svg-line"] {
--icon-fill: hsl(120, 100%, 34%);
}

a:active [class*="a-svg-line"] {
--icon-fill: hsl(120, 100%, 29%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-pinterest"] {
--icon-fill: hsl(351, 100%, 45%);
}

a:hover [class*="a-svg-pinterest"],
a:focus [class*="a-svg-pinterest"] {
--icon-fill: hsl(351, 100%, 40%);
}

a:active [class*="a-svg-pinterest"] {
--icon-fill: hsl(351, 100%, 35%);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-star-select"] {
--icon-fill: var(--color-star);
}

[class*="a-svg-star-half"] {
--icon-fill: var(--color-star-mask);
}

[class*="a-svg-star-empry"] {
--icon-fill: var(--color-star-mask);
}


/* @end @variables */

/* @group @variables */

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

input:checked + label [class*="a-svg-favorite"] {
--icon-fill: var(--color-white);
}

[class*="a-svg-plus"] {
--icon-fill: var(--color-darkgray);
}

input:checked + label [class*="a-svg-plus"] {
--icon-fill: transparent;
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-play"] {
--icon-fill: var(--color-white);
}

/* @end @variables */

/* @group @variables */

[class*="a-svg-toggle"] {
--icon-fill: var(--color-text);
--icon-transition: var(--transition);
}

input:checked ~ label [class*="a-svg-toggle"] {
--transform: rotate(45deg);
}

/* @end @variables */

/* @group @width / height */

[class*="a-svg-icon"],
[class*="a-svg-"] {
box-sizing: border-box;
width: var(--icon-width);
height: var(--icon-height);
fill: var(--icon-fill);
opacity: var(--icon-opacity);
stroke: var(--icon-stroke);
stroke-width:var(--icon-stroke-width);
stop-color: var(--icon-stop-color);
transform: var(--transform);
transform-origin: center;
transition: var(--icon-transition);
}

/* @end @width / height */

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

/* @group @variables */

[class*="a-mask-star-half-left"] {
--icon-stop-color: var(--color-star);
}

[class*="a-mask-star-half-right"] {
--icon-stop-color: var(--color-star-mask);
}

/* @end @variables */

/* @group @width / height */

[class*="a-mask-"] {
stop-color: var(--icon-stop-color);
}

/* @end @width / height */