/*
=====================================================
 EF22 FRAMEWORK
 NAVIGATION-INDICATOR.CSS
 Version 5.0
=====================================================
*/

/* ==========================================
   NAVIGATION INDICATOR
========================================== */

.navigation-indicator {

    position: fixed;

    left: 50%;
    bottom: 24px;

    width: 48px;
    height: 48px;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 0;

    border:
        1px solid
        var(--color-border-strong);

    border-radius: 50%;

    background:
        var(--color-black);

    color:
        var(--color-white);

    cursor: pointer;

    z-index: 950;

    transform: translateX(-50%);

    scale: 1;

    transition:
        scale .35s ease,
        opacity .35s ease,
        transform .35s ease;

}

/* ==========================================
   ICON
========================================== */

.navigation-indicator i {

    font-size: 1rem;

    line-height: 1;

    pointer-events: none;

    transition:
        transform .35s ease;

}

/* ==========================================
   START
========================================== */

.navigation-indicator--bounce {

    animation:
        navigationIndicatorFloat
        1.5s
        ease-in-out
        infinite;

}

/* ==========================================
   SCROLL
========================================== */

.navigation-indicator--compact {

    scale: .82;

}

/* ==========================================
   PARK
========================================== */

.navigation-indicator--park {

    position: absolute;

    top: 24px;
    bottom: auto;

}

.navigation-indicator--up i {

    transform: rotate(180deg);

}

/* ==========================================
   ANIMATION
========================================== */

@keyframes navigationIndicatorFloat {

    0%,
    100% {

        transform:
            translateX(-50%)
            translateY(0);

    }

    50% {

        transform:
            translateX(-50%)
            translateY(-8px);

    }

}

/* ==========================================
   TABLET
========================================== */

@media (min-width: 481px) {

    .navigation-indicator {

        width: 52px;
        height: 52px;

    }

}

/* ==========================================
   DESKTOP
========================================== */

@media (min-width: 769px) {

    .navigation-indicator {

        width: 56px;
        height: 56px;

    }

    .navigation-indicator i {

        font-size: 1.15rem;

    }

}