:root {
    --transcript-spacing: 2rem;
}

.yt-video {
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 315;
}

.transcript-text {
    border-bottom: solid rgb(0 0 0 / 0.5) 1px;
    padding: var(--transcript-spacing) 1rem;
}

.transcript-text .time {
    margin-bottom: 0.5rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 1px;
    text-decoration-color: var(--bg-active-text-color, #A30000);
}

.transcript-text :where(.time, .label-small, .text) {
    display: block;
}

.transcript-text.current {
    background: var(--bg-active-color, #A30000) !important;
    color: var(--active-text-color, white) !important;
    border-color: var(--bg-active-color, #A30000) !important;
}

.transcript-text:is(.current) :is(.timestamp, .text p) {
    color: white !important;
}

.transcript-text:is(.current) .time {
    text-decoration-color: white;
}