.swipe-hint {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.swipe-hint__icon {
    --color: var(--root-color--primary);
}

.swipe-hint__text {
    --color: var(--root-color--primary);
    --font-family: inherit;
    --font-size: 0.833em; /* Mobile 13px / > Mobile 15px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.swipe-hint {
    text-align: center;
    margin-top: 1rem;
}

.swipe-hint__container {
    animation: none;
    display: inline-block;
}

.swipe-hint__icon {
    fill: currentColor;
    height: 1.25em;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.swipe-hint__text {
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    .swipe-hint__container[data-viewport="true"] {
        animation: swipe-hint 2.5s 2 ease-in-out;
    }
}

@media (min-width: 48rem) {
    .swipe-hint {
        display: none;
    }
}

@keyframes swipe-hint {
    0%,
    70%,
    80%,
    90%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50% {
        transform: translate3d(-0.625rem, 0, 0);
    }

    20%,
    40%,
    60% {
        transform: translate3d(0.625rem, 0, 0);
    }
}

.swipe-hint {
    font-size: var(--font-size, 1rem);
}

.swipe-hint__icon {
    fill: var(--color, black);
}

.swipe-hint__text {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.875em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}