.th-slide-navigation {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 15px min-content 1fr min-content 15px;
    grid-template-rows: min-content 1fr min-content;
    pointer-events: none;
    > * {
        pointer-events: all;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Material Icons";
        opacity: 0;
        color: white;
        text-shadow: 0.1em 0.1em 0.1em #0008;
        position: relative;
        transition-property: opacity;
        transition-duration: 0.5s;
        &:hover {
            opacity: 1;
        }
    }
    .th-slide-previous {
        background-image: linear-gradient(to left, #8880, #888c);
        grid-row: 1 / -1;
        grid-column: 1 / span 2;
        font-size: 6vmax;
        &::before {
            content: "arrow_back";
        }
    }
    .th-slide-next {
        background-image: linear-gradient(to right, #8880, #888c);
        grid-row: 1 / -1;
        grid-column: -3 / span 2;
        font-size: 6vmax;
        &::before {
            content: "arrow_forward";
        }
    }
    .th-slide-first,
    .th-slide-last {
        grid-row: 1 / -1;
        font-size: 6vmax;
        &::before {
            position: absolute;
        }
        &:not(:hover)::before {
            display: none;
        }
    }
    .th-slide-first {
        background-image: linear-gradient(to left, #8880, #888f);
        grid-column: 1 / span 1;
        justify-content: start;
        &::before {
            content: "first_page";
        }
    }
    .th-slide-last {
        background-image: linear-gradient(to right, #8880, #888f);
        grid-column: -2 / span 1;
        justify-content: end;
        &::before {
            content: "last_page";
        }
    }
    .th-slide-options {
        background-image: linear-gradient(to bottom, #8880, #888c);
        grid-row: -2 / span 1;
        grid-column: 1 / -1;
        align-items: stretch;
        > * {
            padding: 0.25em;
            cursor: pointer;
            flex: 1 0 1.5em;
            gap: 1em;
            opacity: 0.5;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover {
                opacity: 1;
                background-image: linear-gradient(to bottom, #fff0, #fff4);
            }
        }
        .th-option-contactsheet {
            &::before {
                content: "calendar_view_month";
            }
        }
        .th-option-stopslideshow {
            flex-grow: 0;
            &::before {
                content: "cancel_presentation";
            }
        }
        .th-option-slideshow {
            &::before {
                content: "crop_16_9";
            }
        }
        .th-option-continous {
            &::before {
                content: "splitscreen";
            }
        }
        .th-option-print {
            &::before {
                content: "print";
            }
        }
        .th-option-menu {
            flex-grow: 0;
            &::before {
                content: "menu";
            }
        }
    }
}