/* Animated Slideshow */

@keyframes fader {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fader-container {
    position: relative;
    display: flex;
    justify-content: center;

    & .animated-fader>li img {
        max-height: var(--photo-fader-size);
        max-width: var(--photo-fader-size);
        object-fit: cover;
        margin: 2px;
    }
}

.animated-fader {
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;

    /* margin: calc(var(--shadow-size)*2); */

    width: calc(var(--photo-fader-size)*1.1);
    height: calc(var(--photo-fader-size)*1.1);

    background-color: var(--theme-slideshow-colour);
    border-color: var(--theme-border-colour);

    position: relative;

    &>li {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;

        position: absolute;
        background-color: var(--theme-light-colour);
    }

    &>li:first-of-type {
        animation-name: fader;
        animation-delay: 1s;
        animation-duration: 2s;
        z-index: 1;

        /* motion accessability concerns */
        @media (prefers-reduced-motion) {
            & {
                animation: none;
            }
        }
    }

    &>li:nth-of-type(2) {
        z-index: 0;
    }

    &>li:nth-of-type(n+3) {
        display: none;
    }

    @media only screen and (max-width: 880px) {
        & img {
            max-width: 80%;
        }
    }
}

/* Slider Slideshow */

@keyframes horizontal-slider {
    from {
        margin-left: 0;
    }

    to {
        margin-left: calc(-1 * var(--slider-offset) - calc(var(--slider-margin))/2);
    }
}

@keyframes vertical-slider {
    from {
        margin-top: 0;
    }

    to {
        margin-top: calc(-1 * var(--slider-offset) - calc(var(--slider-margin)));
    }
}

.slideshow-container {
    overflow: hidden;
    border-style: none;
    margin: 1em auto;
    padding: 2px;

    &.vertical {
        width: calc(var(--photo-slider-size));
        width: var(--photo-slider-vertical-size);
        height: 100vh;
    }
}

.sliding-slideshow {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    overflow: hidden;
    list-style-type: none;
    margin: 1em auto;
    padding: 2px;

    &>li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: contain;
    }

    & img {
        border-style: none;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
    }

    &.horizontal {
        flex-flow: row nowrap;
        overflow: hidden;
        width: 100vw;

        &>li {
            height: var(--photo-slider-size);
            margin: 5px 5px;
        }

        & img {
            margin: 0 var(--slider-margin);
        }
    }

    &.vertical {
        flex-flow: column nowrap;
        height: 100vh;

        &>li {
            margin: var(--slider-margin) calc(var(--slider-margin)*2);
            width: var(--photo-slider-vertical-size);
        }

        & img {
            width: 100%;
        }
    }

    /* motion accessability concerns */
    @media not (prefers-reduced-motion) {
        &>li:first-of-type {
            animation-delay: 2s;
            animation-duration: 2s;
            z-index: 2
        }

        &.vertical>li:first-of-type {
            animation-name: vertical-slider;
        }

        &.horizontal>li:first-of-type {
            animation-name: horizontal-slider;
        }
    }
}