@import "shared/mixins-and-vars";

/*
 * This file contains generic CSS that pertains to the 
 * component, including general CSS code to pause CSS
 * transitions and animations as well as code to 
 * pause animated GIFs. For CSS code specific to the
 * Enable demo page of this control, see 
 * pause-animation-control.less in the enable-a11y 
 * git repository.
 */

.pause-anim-control {
    &__checkbox {
        outline-offset: 3px;
        margin: 0 0 0 14px;
    }
}

.play-pause-anim {
    &__background-pill {
        font-size: (14/@px);
        background-color: @dark-grey;
        border-radius: 25px;
        display: inline-flex;
        align-items: center;
        @media @tablet, @desktop {
            font-size: 1.125rem;
        }
    }

    &__checkbox-container {
        align-items: center;
        color: white;
        padding: 20px 0;
        background-color: @grey;
        white-space: nowrap;
        text-align: center;
        display: flex;
        flex-direction: row;
        margin: 0 64px 0 20px;

        @media @desktop {
            margin: 0;
        }

        label {
            cursor: pointer;
            padding: 10px 12px;
            @media @desktop {
                padding: 10px 20px;
            }
        }

        .pause-button {
            width: 0px;
            height: 25px;
            display: inline-block;
            margin: 0px 10px 0 0;

            @media @tablet-up {
                width: 25px;
            }
        }

        a {
            color: #ccccff;
        }
    }
}

.pause-anim-control__gif {
    &--animated,
    &--still {
        max-width: 100%;
    }

    &--animated {
        display: initial;
    }

    &--still {
        display: none;
    }
}

.prefers-reduced-motion() {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }

    .pause-anim-control__gif {
        &--animated {
            display: none;
        }

        &--still {
            display: initial;
        }
    }
}

/*
 * From Bruce Lawson's awesome blog post
 * https://brucelawson.co.uk/2021/prefers-reduced-motion-and-browser-defaults/
 */
@media (prefers-reduced-motion: reduce) {
    body:not(.pause-anim-control__prefers-motion) {
        .prefers-reduced-motion();
    }
}

body.pause-anim-control__prefers-reduced-motion {
    .prefers-reduced-motion();
}