/**
 * SCA | Custom Scroll to Top
 *
 * This file handles the styling for the self-contained scroll-to-top button.
 * It uses a high-specificity ID selector (#sca-scroll-to-top) to avoid
 * conflicts with parent theme styles, eliminating the need for `!important`.
 *
 * This component is controlled by `scroll-to-top.js`.
 *
 * @version 1.2.0
 */
#sca-scroll-to-top {
    /* Core Appearance & Positioning - Mapped 1:1 from Spectra's .swt-scroll-top */
    position: fixed;
    bottom: var(--wp--preset--spacing--small);
    right: var(--wp--preset--spacing--small);
    z-index: 999;
    width: var(--wp--preset--spacing--large);
    height: var(--wp--preset--spacing--large);
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background, #FFFFFF); /* Set foreground color to contrast with background */
    border-radius: var(--wp--custom--border-radius--full); /* For circular shape */
    border: none;
    cursor: pointer;

    /* Icon Alignment */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Visibility & Animation (Scale) - Mapped 1:1 from Spectra's .swt-scroll-top */
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}

#sca-scroll-to-top.is-visible {
    /* Make it visible when the .is-visible class is added by JS */
    transform: scale(1);
}

#sca-scroll-to-top:hover {
    /* Custom hover for better UX, using a darker shade */
    background-color: var(--wp--preset--color--secondary, #003d82);
}

#sca-scroll-to-top svg {
    /* SVG size should be relative to the button size */
    width: 1.25rem; /* ~20px */
    height: 1.25rem;
    fill: var(--wp--preset--color--background, #FFFFFF); /* Inherit the correct color from the parent button */
}