.helen-scroll-top {
position: fixed;
inset-block-end: var(--space-s);
inset-inline-end: var(--space-s);
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--space-l);
block-size: var(--space-l);
padding: 0;
border: var(--panel-border-width) solid var(--color-text-on-dark, #ffffff);
border-radius: var(--radius-pill);
background-color: var(--color-button-fill, #a37176);
color: var(--color-text-on-dark, #ffffff); box-shadow: 0 0 0 0 var(--color-focus-on-dark, #ffffff), 14px 12px 40px rgba(0, 0, 0, 0.22);
cursor: pointer;
opacity: 0;
transform: translateY(var(--space-xs));
transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.helen-scroll-top[hidden] {
display: none;
}
.helen-scroll-top[data-visible] {
opacity: 1;
transform: none;
} .helen-scroll-top:hover,
.helen-scroll-top:focus {
background-color: var(--color-button-fill, #a37176);
color: var(--color-text-on-dark, #ffffff);
}
.helen-scroll-top:hover,
.helen-scroll-top:focus-visible {
outline: var(--space-3xs) solid var(--color-text-on-light, #4c4c4c);
outline-offset: var(--space-3xs);
box-shadow: 0 0 0 var(--space-3xs) var(--color-focus-on-dark, #ffffff), 14px 12px 40px rgba(0, 0, 0, 0.22);
}
.helen-scroll-top svg {
display: block;
}
@media (max-width: 767px) {
.helen-scroll-top {
inset-block-end: var(--space-xs);
inset-inline-end: var(--space-xs);
}
}
@media (prefers-reduced-motion: reduce) {
.helen-scroll-top {
transition: none;
}
}