/*  COMPONENT: BACK-TO-TOP 
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--back-to-top {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 1000;

        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }
    .component--back-to-top.visible {
        opacity: 1;
        transition: opacity 0.3s;
        pointer-events: all;
    }
    .back-to-top {
        background-color: var(--color-white);
        border: var(--border);
    }
    .back-to-top__link {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .back-to-top__text {
        /* font-size: 0;
        line-height: 0; */
        display: block;
        order: 2;
        padding-inline: var(--spacing-s);
        padding-bottom: var(--spacing-s);
    }
    @media (max-width: 480px) {
        .back-to-top__text {
            display: none;
        }
    }
    .back-to-top__icon {
        display: block;
        width: var(--size-icon);
        height: var(--size-icon);

        background-image: url("../../images/icons/icon--next.svg");
        transform: rotate(-90deg);
        font-size: 0;
        line-height: 0;
    }
    .back-to-top__icon:hover {
        soutline: 1px solid;
    }
}