@media(min-width: 540px) {
    .video-controller-container {
        min-width: 510px;
    }
}

.video-controller-container {
    max-width: 100%;
    width: 100%;
    font-size: var(--font-sm);
}

video-controller {
    display: block;
    max-width: 100%;
    width: 100%;
}

.video-controller {
    width: 100%;
}

@keyframes mute-button-change {
    0% {
        transform: scale(0.75);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes indicator-appear {
    0% {
        transform: translate(-50%, -50%) scale(0.75);
        opacity: 0;
    }

    10% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    30% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

@keyframes control-appear {
    0% {
        opacity: 0;
        transform: translateX(-2rem);
        pointer-events: none;
        user-select: none;
        color: white;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        pointer-events: unset;
        user-select: unset;
    }
}

.on-white .vc-container {
    --col-bg-list: color-mix(in srgb, var(--col-bg-light), white 70%);
}

.vc-container.legacy {
    --col-bg-light: #2c444e;
    --col-bg-list: #2c444e;
    --col-list-hover: var(--col-bg-light);
    --col-list-active: var(--maestra-yellow);
    --col-list-active-text: var(--text-light);
    --col-list-text: var(--text-dark);
    --col-icon-selected: var(--maestra-yellow);
    --col-icon: color-mix(in srgb, var(--maestra-yellow), var(--col-bg-light) 30%);
    --col-control-label-bg: #2c444e;
    --col-control-label-text: var(--text-dark);
    --col-category-label-bg: #162f3a;
    --col-category-label-text: var(--maestra-yellow);
    --col-slider-track: #162f3a;
    --col-slider-fill: var(--col-list-active);
    --col-slider-thumb: var(--col-list-active);
    --col-slider-progress-bg: var(--col-slider-fill);
    --col-slider-progress-text: white;
}

.dark-mode .vc-container.legacy {
    --col-bg-light: #203439;
    --col-bg-list: #203439;
    --col-control-label-bg: #203439;
    --col-category-label-bg: #081C23;
    --col-slider-track: #081C23;
}

.dark-mode .vc-container:not(.legacy) {
    --col-bg-light: #1D2024;
    --col-bg-list: var(--col-bg-light);
    --col-list-hover: var(--col-bg-light);
    --col-list-active: var(--ncs-primary);
    --col-list-active-text: var(--ncs-on-primary);
    --col-list-text: var(--text-dark);
    --col-icon-selected: var(--ncs-primary);
    --col-icon: color-mix(in srgb, var(--ncs-primary), var(--col-bg-light) 50%);
    --col-control-label-bg: #070809;
    --col-control-label-text: var(--text-dark);
    --col-category-label-bg: #070809;
    --col-category-label-text: var(--text-dark);
    --col-slider-track: #162f3a;
    --col-slider-fill: var(--col-list-active);
    --col-slider-thumb: var(--col-list-active);
    --col-slider-progress-bg: var(--col-slider-fill);
    --col-slider-progress-text: white;
}

.video-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.vc-container [data-preset] {
    --preset-bg-color: transparent;
    --preset-list-bg-color: var(--preset-bg-color);
    --preset-text-color: transparent;
    --preset-outline-color: transparent;
    --preset-size: 1;

    &[data-preset="1"] {
        --preset-bg-color: black;
        --preset-text-color: white;
        --preset-outline-color: transparent;
    }
    &[data-preset="2"] {
        --preset-bg-color: rgba(0, 0, 0, 0.5);
        --preset-list-bg-color: color-mix(in srgb, white, black 50%);
        --preset-text-color: white;
        --preset-outline-color: transparent;
    }
    &[data-preset="3"] {
        --preset-bg-color: transparent;
        --preset-text-color: white;
        --preset-outline-color: black;
        --preset-size: 1.5;
    }
    &[data-preset="4"] {
        --preset-bg-color: var(--maestra-yellow);
        --preset-text-color: black;
        --preset-outline-color: transparent;
    }
    &[data-preset="5"] {
        --preset-bg-color: transparent;
        --preset-text-color: var(--maestra-yellow);
        --preset-outline-color: black;
        --preset-size: 1.5;
    }
}

.vc-container {
    --col-bg-light: var(--ncs-container-strong);
    --col-bg-list: var(--ncs-container-strong);
    --col-list-hover: var(--col-bg-light);
    --col-list-active: var(--ncs-primary);
    --col-list-active-text: var(--ncs-on-primary);
    --col-list-text: var(--text-light);
    --col-icon-selected: var(--col-list-active);
    --col-icon: var(--text);
    --col-control-label-bg: color-mix(in srgb, var(--ncs-container-weak) 20%, var(--background));
    --col-control-label-text: var(--ncs-primary-contrast);
    --col-category-label-bg: color-mix(in srgb, var(--ncs-container-weak) 20%, var(--background));
    --col-category-label-text: var(--col-icon);
    --col-slider-track: var(--col-bg-light);
    --col-slider-fill: var(--col-list-active);
    --col-slider-thumb: var(--col-list-active);
    --col-slider-progress-bg: var(--col-slider-fill);
    --col-slider-progress-text: white;

    --video-size: min(20rem, calc(90vw - 2rem));
    --video-padding: 0rem;
    --control-height: 2rem;
    --vertical-control-padding: 0.5rem;
    --mute-btn-size: 2rem;
    --indicator-size: 4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 100%;

    .video-categories {
        --padding-amount: var(--video-padding);
        display: flex;
        flex-direction: column;
        gap: var(--padding-amount);
        align-items: flex-start;
        padding: var(--padding-amount);
        border-radius: var(--border-radius);
        background-color: transparent;

        .categories {
            margin-inline-start: calc(var(--video-padding) * 0.5);
            display: none;
            gap: 1rem;
            align-items: stretch;
            position: relative;

            &.multiple {
                display: flex;
            }

            .category-title {
                --target-width: 10px;
                --padding-h: 2rem;
                --full-width: calc(var(--padding-h) + var(--target-width));
                height: var(--control-height);
                width: var(--full-width);
                border-radius: var(--control-height);
                background-color: var(--col-category-label-bg);
                color: var(--col-category-label-text);
                transition: width 0.15s;
                display: flex;
                align-items: center;
                justify-content: center;

                .inner-title {
                    width: fit-content;
                    opacity: 0;
                    transform: translateX(-1rem);
                    user-select: none;
                    pointer-events: none;
                }

                &.resizing .inner-title {
                    opacity: 1;
                    transform: translateX(0);
                    transition: 0.2s;
                }
            }
        }

        .video {
            position: relative;
            width: var(--video-size);
            height: var(--video-size);
            --subtitle-offset: 1rem;

            video {
                aspect-ratio: 1;
                width: var(--video-size);
                object-fit: cover;
                border-radius: calc(var(--border-radius) - calc(var(--padding-amount) * 0.5));
            }

            audio {
                display: none;
            }

            .mute-button {
                --selected-icon: var(--icon-unmuted);

                position: absolute;
                width: var(--mute-btn-size);
                height: var(--mute-btn-size);
                right: var(--subtitle-offset);
                bottom: var(--subtitle-offset);
                border-radius: 100%;
                background-color: var(--col-bg-light);

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

                opacity: 0;
                transform: translateY(2rem);
                transition: 0.15s;
                cursor: pointer;

                >.icon {
                    animation: mute-button-change 0.15s;
                    display: block;
                    content: '';
                    width: 60%;
                    height: 60%;
                    mask-image: var(--selected-icon);
                    mask-size: contain;
                    mask-repeat: no-repeat;
                    mask-position: center;
                    background-color: var(--col-icon);
                }

                &.muted {
                    --selected-icon: var(--icon-muted);
                }

                img {
                    visibility: hidden;
                }
            }

            .play-pause-indicator {
                pointer-events: none;
                user-select: none;
                --scale: 1.0;
                --selected-icon: var(--icon-pause);
                position: absolute;
                width: var(--indicator-size);
                height: var(--indicator-size);
                border-radius: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(var(--scale));
                opacity: 0;
                background-color: rgba(0, 0, 0, 0.5);

                animation: indicator-appear 0.55s;

                &::before {
                    display: block;
                    content: '';
                    width: 100%;
                    height: 100%;
                    mask-image: var(--selected-icon);
                    mask-size: 50%;
                    mask-repeat: no-repeat;
                    mask-position: center;
                    background-color: white;
                }

                &.playing {
                    --selected-icon: var(--icon-play);

                    &::before {
                        mask-size: 30%;
                    }
                }

                &.paused {
                    --selected-icon: var(--icon-pause);
                }

                &.muted {
                    --selected-icon: var(--icon-muted);
                }

                &.unmuted {
                    --selected-icon: var(--icon-unmuted);
                }
            }

            .subtitles {
                --mute-gap: 0.5rem;
                --width-without-offset: calc(var(--video-size) - calc(var(--subtitle-offset) * 3));
                --width-with-mute-gap: calc(var(--width-without-offset) - var(--mute-gap));
                --max-width: calc(var(--width-with-mute-gap) - var(--mute-btn-size));
                --subtitle-text: white;
                --subtitle-bg: rgba(0, 0, 0, 0.5);
                --subtitle-font: 'Plus Jakarta Sans', sans-serif;
                --subtitle-size: 1;

                --subtitle-base-size: var(--font-sm);
                --subtitle-calc-size: calc(var(--subtitle-size) * var(--subtitle-base-size));

                position: absolute;
                font-family: var(--subtitle-font);
                width: min(80%, var(--max-width));
                height: fit-content;
                text-wrap: wrap;
                bottom: var(--subtitle-offset);
                left: 50%;
                padding: 0.25rem;
                line-height: 1.5;
                box-sizing: border-box;
                transform: translateX(-50%);
                background-color: var(--subtitle-bg);
                color: var(--subtitle-text);
                font-size: var(--subtitle-calc-size);
                text-align: center;
                border-radius: 4px;
                transition: 0.15s;
                pointer-events: none;
                user-select: none;

                &.hidden {
                    display: none;
                }

                &[data-preset] {
                    background-color: var(--preset-bg-color);
                    color: var(--preset-text-color);
                    text-shadow: 1px -1px 0 var(--preset-outline-color),
                    -1px 1px 0 var(--preset-outline-color),
                    1px 1px 0 var(--preset-outline-color),
                    -1px -1px 0 var(--preset-outline-color);
                    font-size: calc(var(--preset-size) * var(--subtitle-calc-size));
                }
            }

            &:hover .subtitles {
                left: var(--subtitle-offset);
                transform: translateX(0);
            }

            &:hover .mute-button {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }

    .list-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;

        .item {
            color: var(--col-list-text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--col-bg-list);
            padding: 0.5rem 1rem;
            box-sizing: border-box;
            cursor: pointer;
            transition: 0.15s;
            border-radius: calc(var(--border-radius) * 0.25);
            height: 2.5em;

            &:not(.selected):hover {
                box-shadow: 0px 0px 0px 0.25rem var(--col-list-hover);
            }

            &:not(.selected):active {
                transform: scale(0.95);
            }
        }

        .item.selected {
            transform: scale(1);
            background-color: var(--col-list-active);
            color: var(--col-list-active-text);
            cursor: default;

        }

        .item>.icon {
            width: 1em;
            height: 1em;
            object-fit: contain;
        }
    }

    .list-container.preset-list {
        .item::after {
            content: "Aa";
            margin-inline-start: auto;
            background-color: var(--preset-list-bg-color);
            color: var(--preset-text-color);
            text-shadow: 1px -1px 0 var(--preset-outline-color),
            -1px 1px 0 var(--preset-outline-color),
            1px 1px 0 var(--preset-outline-color),
            -1px -1px 0 var(--preset-outline-color);
            width: 2rem;
            border-radius: 2px;
            font-size: calc(var(--preset-size) * 1rem);
        }
    }

    .color-container {
        --target-width: calc(var(--control-height) * 0.75);
        --color-height: calc(var(--control-height) * 0.5);
        --h-padding: 0.25rem;
        --h-padding-2x: calc(var(--h-padding) * 2);
        width: var(--target-width);
        height: fit-content;
        border-radius: var(--target-width);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        box-sizing: border-box;
        gap: 0.5rem;
        padding: 1rem var(--h-padding);
        background-color: var(--col-bg-list);

        .color {
            --darkened-color: color-mix(in srgb, var(--color), black 10%);
            --full-shift-amount: 0.75rem;
            --full-indicator-size: 0.6rem;
            --indicator-progress: 0.0;
            --shift-amount: calc(var(--full-shift-amount) * var(--indicator-progress));
            --indicator-size: calc(var(--full-indicator-size) * var(--indicator-progress));

            position: relative;
            cursor: pointer;
            width: var(--target-width);
            height: var(--color-height);

            transition: 0.15s;

            &:before {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: var(--shift-amount);
                width: var(--target-width);
                height: var(--color-height);
                border: 2px solid var(--darkened-color);
                border-radius: var(--color-height);
                background-color: var(--color);
                box-sizing: border-box;
                transition: inherit;
            }

            .indicator {
                --border-thickness: calc(2px * var(--indicator-progress));
                position: absolute;
                left: 0;
                top: 50%;
                border: var(--border-thickness) solid var(--darkened-color);
                box-sizing: border-box;
                width: var(--indicator-size);
                height: var(--indicator-size);
                border-radius: 100%;
                transform: translate(0, -50%);
                transition: inherit;
                background-color: var(--color);
            }

            &:hover {
                --indicator-progress: 0.8;
            }

            &.selected {
                --indicator-progress: 1.0;
            }
        }
    }

    .slider-container {
        overscroll-behavior: none;

        .slider {
            touch-action: none;
            --thumb-size: 1.25rem;
            --track-width: 0.6rem;
            --slider-width: var(--control-height);
            --slider-height: calc(var(--control-height) * 4);
            --track-padding-2x: calc(var(--slider-width) - var(--track-width));
            --track-padding: calc(var(--track-padding-2x) * 0.5);
            --track-height: calc(var(--slider-height) - var(--track-padding-2x));
            --thumb-active-height: calc(var(--track-height) - var(--thumb-size));
            --thumb-bottom: calc(var(--thumb-active-height) * var(--progress));
            margin-inline-start: calc(var(--control-height) * 0.25);
            width: var(--control-height);
            height: var(--slider-height);
            border-radius: var(--control-height);
            background-color: var(--col-bg-list);
            padding: var(--track-padding);
            box-sizing: border-box;
            position: relative;

            .progress {
                position: absolute;
                height: var(--control-height);
                padding: 0 0.75rem;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                border-radius: var(--control-height);
                border-bottom-left-radius: calc(var(--control-height) * 0.25);
                background-color: var(--col-slider-progress-bg);
                color: var(--col-slider-progress-text);
                bottom: calc(var(--thumb-bottom) + var(--track-padding));
                left: calc(var(--slider-width) + 0.5rem);
            }

            .track {
                width: var(--track-width);
                height: var(--track-height);
                border-radius: var(--track-width);
                background-color: var(--col-slider-track);
                position: relative;
                --fill-height: calc(var(--track-height) * var(--progress));
                cursor: pointer;

                .fill {
                    position: absolute;
                    width: var(--track-width);
                    height: var(--fill-height);
                    bottom: 0;
                    left: 0;
                    background-color: var(--col-slider-fill);
                    border-radius: var(--track-width);
                    cursor: pointer;
                }

                .thumb {
                    width: var(--thumb-size);
                    height: var(--thumb-size);
                    border-radius: 100%;
                    background-color: var(--col-slider-thumb);
                    position: absolute;
                    bottom: var(--thumb-bottom);
                    left: 50%;
                    transform: translate(-50%, 0);
                    cursor: pointer;
                }
            }

        }
    }


    .control {
        grid-column: 1;
        grid-row: 1;

        &:not(.active) {
            visibility: hidden;
            pointer-events: none;
            color: var(--text-light);
            opacity: 0;
        }

        &.active {
            pointer-events: unset;
            visibility: visible;
            animation: control-appear 0.25s forwards;
            opacity: 1;
        }
    }

    .icon-list {
        --item-size: .8rem;
        --item-scale: 1.25;
        --item-hover-scale: 1.35;
        --item-selected-scale: 1.5;
        --indicator-scale: 0;
        --indicator-hover-scale: 0.9;
        --indicator-selected-scale: 1.25;
        display: flex;
        align-items: stretch;
        height: var(--control-height);
        gap: 1rem;

        >.item {
            --color: var(--col-icon);
            --indicator-size: 0.25rem;
            --item-selected-scale: var(--item-scale);
            --indicator-selected-scale: var(--indicator-scale);
            width: var(--item-size);
            height: var(--control-height);
            border-radius: 50%;
            position: relative;
            cursor: pointer;

            >.icon {
                mask-image: var(--icon-url);
                mask-size: contain;
                mask-repeat: no-repeat;
                mask-position: center;
                background-color: var(--color);
                width: 100%;
                height: 100%;
                transform: scale(var(--item-selected-scale));
                transition: 0.15s;
            }

            .indicator {
                --indicator-calc-size: calc(var(--indicator-size) * var(--indicator-selected-scale));
                position: absolute;
                bottom: 0;
                left: 50%;
                width: var(--indicator-calc-size);
                height: var(--indicator-calc-size);
                border-radius: 100%;
                background-color: var(--color);
                transform: translate(-50%, 50%);
                transition: 0.15s;
            }
        }

        .item:hover {
            --item-scale: var(--item-hover-scale);
            --indicator-scale: var(--indicator-hover-scale);
            --color: var(--col-icon);
        }

        .item.active {
            --item-selected-scale: inherit;
            --indicator-selected-scale: inherit;
            --color: var(--col-icon-selected);
        }
    }

    .control-container {
        --target-width: 10px;
        --padding-h: 2rem;
        --full-width: calc(var(--target-width) + var(--padding-h));
        height: var(--control-height);
        width: var(--full-width);
        align-items: center;
        justify-content: center;
        border-radius: 3rem;
        background-color: var(--col-bg-light);
        transition: width 0.15s;
        display: none;

        &.multiple {
            display: flex;
        }

        .inner-container {
            width: fit-content;
        }

        .item {
            opacity: 0;
            transform: translateX(-1rem);
        }
    }

    .control-container.resizing {
        .item {
            opacity: 1;
            transform: translateX(0);
            transition: 0.2s;
        }

        .item:nth-child(2) {
            transition-delay: 0.07s;
        }

        .item:nth-child(3) {
            transition-delay: 0.14s;
        }

        .item:nth-child(4) {
            transition-delay: 0.2s;
        }
    }

    .control-title {
        --target-width: 10px;
        --padding-h: 2rem;
        background-color: var(--col-control-label-bg);
        color: var(--col-control-label-text);
        border-radius: var(--control-height);
        height: var(--control-height);
        width: calc(var(--padding-h) + var(--target-width));
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;

        .inner-title {
            width: fit-content;
            opacity: 0;
            transform: translateX(-1rem);
            user-select: none;
            pointer-events: none;
        }

        &.resizing .inner-title {
            opacity: 1;
            transform: translateX(0);
            transition: 0.2s;
        }
    }

    .controls-panel {
        align-self: stretch;
        min-width: 120px;
    }

    .controls-panel-inner {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .control-icons-title {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        &>.controls {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
        }
    }
}





.video-controller.vertical {
    .vc-container {
        flex-direction: column;
        gap: 0;
    }

    .video-categories {
        flex-direction: column-reverse;
        gap: var(--vertical-control-padding);

        .categories {
            align-self: stretch;
            position: relative;
            display: flex;
            opacity: 0;
            pointer-events: none;
            padding-bottom: var(--vertical-control-padding);

            &.multiple {
                opacity: 0;
                pointer-events: all;
            }
        }
    }

    .icon-list.categories {
        padding-left: 0.5rem;
    }

    .icon-list.categories,
    .categories {
        margin-inline-start: 0;
    }

    .category-title,
    .control-title {
        position: absolute;
        pointer-events: none;
        color: var(--col-category-label-text) !important;
        font-size: var(--font-sm);
        top: var(--vertical-control-padding);
        --full-width: calc(var(--target-width) + var(--padding-h));
        left: calc(50% - calc(var(--full-width) * 0.5));

    }

    .control-title {
        min-width: unset !important;
        background-color: var(--col-category-label-bg) !important;
    }

    .controls-panel {
        width: 100%;
        max-width: calc(var(--video-size) + 2 * var(--video-padding));
        align-self: center;
        align-items: center;
        --offset-height: calc(calc(var(--control-height) * -1) - 1rem);
        margin-top: var(--offset-height);
    }

    .icon-list .item .indicator {
        display: none !important;
    }

    .controls-panel-inner {
        min-width: unset;
        margin: 0 auto;
        align-self: stretch;
        flex-direction: column;
        align-items: stretch;

        gap: calc(var(--control-height) + var(--vertical-control-padding) * 3);

        .control-icons-title {
            pointer-events: none;
            position: relative;
            padding: 0 var(--video-padding);
            align-self: stretch;
            flex-direction: row-reverse;
            justify-content: flex-start;

            .control-container {
                margin-top: 0;
                --padding-h: 1rem;
                pointer-events: all;
            }

            .control-title {
                min-width: 8rem;
                margin-inline-end: auto;
                text-align: start;
                justify-content: center;
                padding: 0 1em;
            }
        }

        &>.controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            font-size: var(--font-sm);

            .control:not(.active) {
                display: none;
            }

            .list-container {
                align-self: stretch;
            }
        }
    }

    .list-container.language-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        &>.item {
            width: var(--control-height);
            height: var(--control-height);
            border-radius: var(--control-height);
            justify-content: center;

            &>.vc-list-title {
                display: none;
            }
        }
    }

    .list-container.font-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        &>.item {
            height: var(--control-height);
            border-radius: var(--control-height);
        }
    }

    .color-container {
        height: var(--target-width);
        width: fit-content;
        flex-direction: row;
        padding: var(--h-padding) 1rem;
        margin-bottom: var(--target-width);

        .color {
            height: var(--target-width);
            width: var(--color-height);

            &:before {
                top: var(--shift-amount);
                width: var(--color-height);
                height: var(--target-width);
                left: 0;
            }
        }

        .indicator {
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
        }
    }

    .slider-container {
        margin-bottom: calc(var(--control-height) + 0.5rem);

        .slider {
            margin-inline-start: 0;
            width: var(--slider-height);
            height: var(--control-height);

            .progress {
                border-bottom-left-radius: var(--control-height);
                border-top-left-radius: calc(var(--control-height) * 0.25);
                left: calc(var(--thumb-bottom) + var(--track-padding));
                top: calc(var(--slider-width) + 0.5rem);
                bottom: unset;
                padding: 0 1em;
            }

            .track {
                width: var(--track-height);
                height: var(--track-width);

                .fill {
                    width: var(--fill-height);
                    height: var(--track-width);
                }

                .thumb {
                    left: var(--thumb-bottom);
                    top: 50%;
                    transform: translate(0, -50%);
                }
            }
        }


    }
}