/**
 * ============================================================================
 * BACK TO TOP BUTTON COMPONENT
 * Priya Glam Studio & Academy
 * ============================================================================
 */

/* ============================================================================
   BUTTON
   ============================================================================ */

.back-to-top {
    position: fixed;
    left: max(var(--spacing-md), env(safe-area-inset-left));
    bottom: max(var(--spacing-2xl), env(safe-area-inset-bottom));
    z-index: var(--z-fixed);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;
    padding: 0;

    background: var(--gradient-rose-gold);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-full);

    box-shadow: var(--shadow-rose);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(1.25rem);

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-fast);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-0.25rem);

    box-shadow: var(--shadow-rose-lg);
}

.back-to-top:active {
    transform: translateY(-0.125rem);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.back-to-top i {
    color: inherit;
    font-size: 1.125rem;
    line-height: 1;
}


/* ============================================================================
   MOBILE
   ============================================================================ */

@media (max-width: 768px) {
    .back-to-top {
        left: max(var(--spacing-md), env(safe-area-inset-left));

        bottom:
            calc(
                var(--mobile-cta-height) +
                var(--spacing-md) +
                env(safe-area-inset-bottom)
            );

        width: 2.75rem;
        height: 2.75rem;
    }

    .back-to-top:hover {
        transform: none;
    }
}


/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

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

    .back-to-top:hover,
    .back-to-top:active {
        transform: translateY(0);
    }
}