div#videoOsdPage {
    > .videoOsdBottom > .osdControls > .buttons .btnTranscript {
        &.enabled {
            color: rgba(var(--accent), 0.8) !important;
        }
    }

    .osdTranscript {
        position: absolute;
        right: 3em;
        bottom: 0;

        backdrop-filter: blur(16px);

        transition: opacity 0.1s ease-in-out;
        opacity: 0;
        pointer-events: none;

        text-shadow:
            0 0 1em black,
            0 0 1em black,
            0 0 0.5em black,
            0 0 0.5em black,
            0 0 0.25em black,
            0 0 0.25em black,
            0 0 3px black,
            0 0 3px black,
            0 0 2px black,
            0 0 2px black;

        font-weight: 600;

        &.enabled {
            opacity: 1;
            pointer-events: all;
        }

        .transcriptLogWrap {
            max-width: min(40vw, 30em);
            max-height: min(50vh, 30em);
            overflow-y: scroll;
            overflow-x: hidden;

            scroll-snap-type: y proximity;
        }

        .transcriptLog {
            border-collapse: collapse;
            border-spacing: 0;
            line-height: 1.5em;
        }

        .line {
            position: relative;
            z-index: 1;

            scroll-snap-align: end;

            body:not([input-eaten="true"]) & {
                cursor: pointer;
            }

            &::before, &::after {
                content: "";
                position: absolute;
                z-index: -1;

                transition: background-color 0.1s ease-in-out, opacity 0.1s ease-in-out;
            }

            &::before {
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;

                background-color: var(--bg);
                opacity: var(--bg-opacity);
            }

            &::after {
                top: 0;
                left: 0;
                bottom: 0;
                width: 0.25em;

                background-color: var(--bar);
                opacity: var(--bar-opacity);
                transform: scaleY(var(--progress));
                transform-origin: 0 0;
            }

            --bg: #000000;
            --bg-opacity: 0.25;
            --bar: rgb(var(--accent, 0x00, 0xad, 0xee));
            --bar-opacity: 0;

            &:nth-child(2n) {
                --bg: #888888;
            }

            &.active {
                --bg: var(--bar);
                --bg-opacity: 0.5;
                --bar-opacity: 1;
            }

            .time {
                display: inline-block;
                margin: 0.75em 1em;
                margin-right: 0;
            }

            .text {
                overflow-wrap: anywhere;
                padding: 0.75em;
            }

            &[data-positive="false"] {
                display: none;
            }
        }
    }
}