/* RESET */
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* VARIABLES */
:root {
    --items: 5;
    --gap: 0.4rem;

    --border-xl: 24px;
    --border-m: 8px;
    --border-s: 8px;
}

/* CONTAINER */
.image-thumbnail-carousel {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    padding: 1rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    min-width: 0;
}

/* MAIN SCREEN */
.screen {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 30vmin;

    background: #000;
    border-radius: var(--border-xl);
    overflow: hidden;

    position: relative;
    display: block;

    box-shadow: var(--shadow-outside);

    /* Fix iframe clipping issues */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.screen iframe,
.screen img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
    object-fit: cover;
    display: block;
}

/* THUMBNAIL AREA */
.thumbnail-carousel {
    display: flex;
    align-items: center;
    gap: var(--gap);

    width: 100%;
    min-width: 0;

    background-color: var(--md-default-fg-color--lightest);
    border-radius: var(--border-xl);

    box-shadow: inset -5px 5px 15px #00000064,
                inset 5px -5px 15px #00000026;
}

/* BUTTONS */
.carousel__btn {
    flex: 0 0 auto;
    width: 2.75rem;

    background: none;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.5rem;
}

.carousel__btn:disabled {
    opacity: 0.2;
    pointer-events: none;
}

/* SLIDER */
.carousel__slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: var(--gap);

    overflow-x: auto;
    overflow-y: hidden;

    list-style: none;
    padding: 0;
    margin: 0;

    flex: 1 1 auto;
    min-width: 0;
}

.carousel__slider::-webkit-scrollbar {
    display: none;
}

/* SLIDES */
.carousel__slide {
    flex: 0 0 auto !important;

    width: calc((100% - (var(--gap) * (var(--items) - 1))) / var(--items));
    aspect-ratio: 16 / 9;

    display: block; /* important: avoid nested flex weirdness */

    border-radius: var(--border-m);
    overflow: hidden;

    cursor: pointer;
    opacity: 0.6;
}

.carousel__slide.active {
    opacity: 1;
    outline: 2px solid var(--md-accent-fg-color);
    outline-offset: -2px;
}

/* THUMBNAIL CONTENT */
.thumbnail {
    width: 100%;
    height: 100%;
    border-radius: var(--border-s);
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* VIDEO THUMB */
.video-thumb {
    position: relative;
}

.video-thumb .play {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumb .play::before {
    content: "▶";
    font-size: 24px;
    color: white;
}

/* MOBILE */
@media (max-width: 680px) {
    :root {
        --items: 2;
    }
}