module.css

/* Style the un-upgraded slide-show */

slide-show {
    display: grid;
    /* Rules that can be overridden with classes, which themselves override
       :host styles. */
    position: relative;
    box-sizing: border-box;
    padding: 0;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-auto-rows: min-content;
    align-items: center;
    justify-items: stretch;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;

    -webkit-scroll-behavior: smooth;
            scroll-behavior: smooth;

    overscroll-behavior-x: contain;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */

    /* Overridden on upgrade */
    padding-left:         var(--padding-left,  0);
    padding-right:        var(--padding-right, 0);
    scroll-padding-left:  var(--padding-left,  0);
    scroll-padding-right: var(--padding-right, 0);
}

slide-show:not(:defined) {
    /* Rules that you want to override on slide-show when the element is not
       upgraded  */
    overflow: scroll;
    overflow-y: hidden;
}

slide-show:not(:defined) > [slot] {
    display: none !important;
}

.loading slide-show {
    /* During loading make scrolling instant */
    -webkit-scroll-behavior: auto;
            scroll-behavior: auto;
}


/*
slide-show:defined {
}
*/

slide-show::-webkit-scrollbar {
    display: none;
}

slide-show:not(:defined) > [slot] {
    display: none;
}

slide-show > * {
    /* Note that this also applies to content in slots other than the default,
       but we don't worry about that too much, the aim is to have the selector
       as easily overrideable as possible. This selector is overrideable with
       a simple class, or with a complex child selector. */
    scroll-snap-align: center;
}

slide-show:-webkit-full-screen {
    align-content: center;
}

slide-show:fullscreen {
    align-content: center;
}

/*
Simulate in iOS
slide-show.fullscreen {
    align-content: center;
}
*/