/* @group @variables */

:root {
--page-top-right: var(--x-padding-right);
--page-top-opacity: 0;
}

[class*="is-fit-sticky"] {
--page-top-opacity: 1;
}

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

:root {
--page-top-transform: translate(calc(100% + .75rem));
}

}

[class*="a-page-top"] {
--link-background-color: hsla(180, 50.2%, 44.9%, .5);
--page-top-icon-after-background-color: hsla(180, 50.2%, 44.9%, .75);
--page-top-icon-background-color: var(--color-white);
--link-transition: background-color 0s ease;
--link-action-transition: background-color .3s ease;
--page-top-icon-size: 3.375rem;
--page-top-icon-mask-image: url('../img/sprite-svg.svg#icon-pagetop');
--page-top-icon-mask-size: 1.875rem 1.875rem;
}

[class*="is-foot-sticky"] [class*="a-page-top"] {
--link-background-color: hsla(0, 0%, 100%, .675);
--page-top-icon-after-background-color: hsla(180, 50.2%, 44.9%, .875);
}

/* @end @variables */

/* @group @a-page-top */

[class*="a-page-top"] {
box-sizing: border-box;
position: fixed;
z-index: 3;
z-index: 11;
bottom: 1.5rem;
right: var(--page-top-right);
width: var(--page-top-icon-size);
height: var(--page-top-icon-size);
border-radius: .1875rem;
opacity: var(--page-top-opacity);
transition: var(--transition);
}

[class*="a-page-top"] a {
position: relative;
display: grid;
place-items: center;
width: inherit;
height: inherit;
background-color: var(--link-background-color);
border-radius: inherit;
transform: var(--page-top-transform);
}

@media print {[class*="a-page-top"] {display: none;}}

[class*="a-page-top"] a:before,
[class*="a-page-top"] a:after {
content: '';
box-sizing: border-box;
}

[class*="a-page-top"] a:before {
position: relative;
z-index: 2;
inset: 0;
display: grid;
width: var(--page-top-icon-size);
height: var(--page-top-icon-size);
background-color: var(--page-top-icon-background-color);
-webkit-mask-image: var(--page-top-icon-mask-image);
mask-image: var(--page-top-icon-mask-image);
-webkit-mask-size: var(--page-top-icon-mask-size);
mask-size: var(--page-top-icon-mask-size);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

[class*="a-page-top"] a:after {
position: absolute;
z-index: -1;
inset: 0;
display: block;
width: var(--page-top-icon-size);
height: var(--page-top-icon-size);
background-color: var(--page-top-icon-after-background-color);
border-radius: inherit;
transition: transform .3s ease;
transform: scaleY(0);
transform-origin: top;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

[class*="a-page-top"] a:hover:after,
[class*="a-page-top"] a:focus:after {

transform: scaleY(1);
transform-origin: bottom;
background-origin: bottom;
}

/* @end @a-page-top */