/**
 * ToDo web4.0 House cleaning when all app-store pages are set to web4.0
 * removal pre-web40 styling
 * removal wrapper card--app-spotlight, but keep content
 */


/* pre web40 */
.card-clean {
    .glide__slide {
        display: flex;
        height: unset;
    }

    .glide__arrows {
        display: flex;
        justify-content: center;
        gap: 1em;
        font-size: 1.5rem;
    }

    .glide__arrow {
        position: relative;
        top: unset;
        right: unset;
        left: unset;
        transform: unset;
        padding: .75em;
        color: #8200DF;
        border: none;
        box-shadow: none;
        transition: color 200ms ease-in-out;
    }

    .glide__arrow:active,
    .glide__arrow:focus,
    .glide__arrow:hover {
        color: #CD99F2;
    }

    .glide__arrow svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
    }
}


/* web4.0 */
.card--app-spotlight {
    .glide__slide {
        display: flex;
        height: unset;
    }

    .glide__arrows {
        display: flex;
        justify-content: center;
        gap: 1em;
        font-size: 1.5rem;
    }

    .glide__arrow {
        color: var(--eds-style-color, #FFFFFF);
        border: none;
        box-shadow: none;
        transition: color 200ms ease-in-out;
    }


    .glide__arrow:active,
    .glide__arrow:focus,
    .glide__arrow:hover {
        color: var(--eds-style-color-alt-1, #FFFFFF99);
    }

    .glide__arrow svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
    }
}

@media (max-width: 64.5648148148rem) {
    .card--app-spotlight .glide__arrow {
        position: relative;
        top: unset;
        right: unset;
        left: unset;
        transform: unset;
        padding: .75em;
    }
}

@media (min-width: 64.5648148148rem) {
    .card--app-spotlight {
        padding-block-end: var(--eds-s1);

        .glide__arrow--left {
            left: -2em;
        }

        .glide__arrow--right {
            right: -2em;
        }
    }
}