.f12-site-back-to-top {
    --f12-site-back-to-top-size: 2.5rem;
    --f12-site-back-to-top-bg: var(--f12-color-surface-subtle, #f5f5f5);
    --f12-site-back-to-top-bg-hover: #f9f0ef;
    --f12-site-back-to-top-fg: var(--f12-color-text-muted, #6b6b6b);
    --f12-site-back-to-top-fg-hover: var(--f12-color-brand-editorial, #a6201a);
    --f12-site-back-to-top-border: var(--f12-color-border-subtle, rgba(45, 45, 45, 0.12));
    --f12-site-back-to-top-border-hover: rgba(166, 32, 26, 0.16);
    position: fixed;
    inset-inline-end: clamp(1rem, 2vw, 2rem);
    bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + var(--f12-back-to-top-offset-extra, 0px));
    z-index: 999;
}

html[data-f12-cookie-banner-visible="true"] .f12-site-back-to-top {
    display: none;
}

.f12-site-back-to-top__button {
    appearance: none;
    width: var(--f12-site-back-to-top-size);
    height: var(--f12-site-back-to-top-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--f12-site-back-to-top-border);
    border-radius: 999px;
    background: var(--f12-site-back-to-top-bg);
    color: var(--f12-site-back-to-top-fg);
    box-shadow: none;
    cursor: pointer;
    line-height: 1;
    opacity: 0;
    transform: translateY(0.875rem) scale(0.96);
    pointer-events: none;
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
    transition:
        opacity 180ms ease,
        transform 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        background 220ms ease;
}

.f12-site-back-to-top.is-visible .f12-site-back-to-top__button {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: f12-site-back-to-top-reveal 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes f12-site-back-to-top-reveal {
    0% {
        opacity: 0;
        transform: translateY(0.875rem) scale(0.96);
    }

    72% {
        opacity: 1;
        transform: translateY(-0.1rem) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.f12-site-back-to-top__button:hover {
    background: var(--f12-site-back-to-top-bg-hover);
    border-color: var(--f12-site-back-to-top-border-hover);
    color: var(--f12-site-back-to-top-fg-hover);
    transform: translateY(-0.25rem) scale(1.03);
}

.f12-site-back-to-top__button:focus-visible {
    outline: 2px solid var(--f12-color-focus-outline, rgba(117, 117, 117, 0.4));
    outline-offset: 3px;
}

.f12-site-back-to-top__icon {
    width: 1rem;
    height: 1rem;
    display: block;
    flex: 0 0 auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.f12-site-back-to-top__icon path {
    fill: none;
    stroke: currentColor;
    vector-effect: non-scaling-stroke;
}

.f12-site-back-to-top__button:hover .f12-site-back-to-top__icon {
    transform: scale(1.16);
}

@media (max-width: 767px) {
    .f12-site-back-to-top__button {
        --f12-site-back-to-top-size: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .f12-site-back-to-top__button {
        transition: none;
    }

    .f12-site-back-to-top.is-visible .f12-site-back-to-top__button {
        animation: none;
    }
}