/* Needed for PostCSS https://www.npmjs.com/package/@csstools/postcss-cascade-layers */
@layer
base,
elements,
objects,
components,
modifiers,
scope,
vendors,
ui,
utilities;

@layer ui {
    /* GROUP PLUGIN / PLYER / DECORATION
    =================================================== */
    :root {
        --plyr-color-main: var(--color-primary-text);
        --plyr-control-spacing: 1em;
        [class*="--flip-colors"] {
            --plyr-color-main: var(--color-primary-text); /* e.g. >> /work/pepsico-x-pipers-crisps */
        }
    }

    .plyr {
        /* Rounded corners by default */
        clip-path: inset(0 0 0 0 round var(--border-radius-vision-pro));
    }

    /* Button colors */
    .plyr__control svg {
        color: white;
        fill: white;
    }

    .plyr--video .plyr__control:hover svg {
        color: white;
    }

    .plyr--video .plyr__control:hover svg {
        color: white;
    }

    /* Override mute since we don't have volume controls */
    .plyr__volume {
        min-width: 40px;
        width: 0;
    }

    .plyr--video .plyr__controls {
        background: none;
    }

    .js__plyr-muted-cover {
        /* e.g. >> Home. */
        min-width: 100%;
    }

    [class*="--flip-colors"] .plyr * {
        color: var(--color-primary-text); /* e.g. >> /work/paradise-tv */
    }

    /* May or may not be needed */
    /* Cancelled based on mobile e.g. >> /events */
    /* .plyr iframe { */
        /* Cover any odd black hairlines at the top of videos */
        /* width: 124%; */
        /* left: 4%; */
    /* } */
    /* GROUP PLUGIN / PLYER / ACCESSIBILITY
    =================================================== */
    /* Remove background hover color for an icon color */
    .plyr--video .plyr__controls__item:hover,
    .plyr--video .plyr__controls__item:focus,
    .plyr--video .plyr__volume .plyr__control:hover,
    .plyr--video .plyr__volume .plyr__control:focus {
        background: none;
    }
    /* GROUP PLUGIN / PLYER / ACCESSIBILITY / FOCUS
    =================================================== */
    .plyr--video .plyr__controls__item:focus,
    .plyr--video .plyr__volume .plyr__control:focus {
        transition: none;
        outline: 3px solid white;
    }

    .plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
        outline-style: solid;
    }

    .plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
        outline-style: solid;
    }

    .plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
        outline-style: solid;
    }
}