/* Кнопка швидкого прокручування нагору */

.scroll-to-top {
    position: fixed;
    z-index: 80;

    right: max(18px, env(safe-area-inset-right));
    bottom: max(
        18px,
        calc(env(safe-area-inset-bottom) + 12px)
    );

    display: grid;
    width: 50px;
    height: 50px;
    padding: 0;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--surface);
    background:
        color-mix(
            in srgb,
            var(--surface) 88%,
            transparent
        );

    color: var(--text);

    box-shadow:
        0 10px 28px rgb(0 0 0 / 24%),
        inset 0 1px 0 rgb(255 255 255 / 8%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transform: translateY(14px) scale(0.92);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.scroll-to-top[hidden] {
    display: none;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
    border-color: var(--brand-light);
    color: var(--brand-light);
    transform: translateY(-2px) scale(1.03);
}

.scroll-to-top:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--brand-light) 40%,
            transparent
        );

    outline-offset: 3px;
    border-color: var(--brand-light);
    color: var(--brand-light);
}

.scroll-to-top:active {
    transform: translateY(0) scale(0.95);
}

.scroll-to-top svg {
    display: block;
    width: 24px;
    height: 24px;
}

@media (max-width: 640px) {
    .scroll-to-top {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(
            14px,
            calc(env(safe-area-inset-bottom) + 10px)
        );

        width: 46px;
        height: 46px;
    }

    .scroll-to-top svg {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-to-top {
        transition:
            opacity 100ms linear,
            visibility 100ms linear;
    }
}

/* Керування доступністю кнопки */

.scroll-to-top:not(.is-available) {
    display: none;
}

.scroll-to-top.is-available {
    display: grid;
}

.scroll-to-top.is-available.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}