.timelineStrip {
    --timeline-control-size: var(--btn-slim-h);
    --timeline-control-radius: var(--radius-3);
    --timeline-track-size: var(--pad-3);
    --timeline-thumb-size: calc(var(--icon-size-sm) + (var(--border-1) * 2));
    min-width: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--pad-2);
    position: relative;
    z-index: calc(var(--z-overlay) + 2);
    background: var(--c-surface-glass);
    border: var(--border-2) solid var(--c-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
}

.timelineStrip[hidden] {
    display: none;
}

.timelineStrip__primary {
    min-width: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-1);
}

.timelineStrip__transport,
.timelineStrip__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--gap-1);
}

.timelineStrip__toolCluster {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.timelineStrip__toolCluster > * + * {
    margin-left: calc(-1 * var(--border-1));
}

.timelineStrip__buttonGroup {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.timelineStrip__buttonGroup > * + * {
    border-left-width: 0;
}

.timelineStrip__scrubber {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.timelineStrip__button {
    height: var(--timeline-control-size);
    min-height: var(--timeline-control-size);
    box-shadow: none;
    border-radius: 0;
}

.timelineStrip__button.is-active,
.timelineStrip__button[aria-pressed="true"] {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.timelineStrip__iconButton {
    width: var(--timeline-control-size);
    min-width: var(--timeline-control-size);
    min-height: var(--timeline-control-size);
    padding: 0;
}

.timelineStrip__stepButton {
    padding: 0 var(--pad-1);
    font: var(--font-button);
}

.timelineStrip__buttonGroup > :first-child {
    border-top-left-radius: var(--timeline-control-radius);
    border-bottom-left-radius: var(--timeline-control-radius);
}

.timelineStrip__buttonGroup > :last-child {
    border-top-right-radius: var(--timeline-control-radius);
    border-bottom-right-radius: var(--timeline-control-radius);
}

.timelineStrip__stepIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.timelineStrip__stepIcon--minus {
    mask-image: url("../../../public/assets/icons/ui/minus.svg");
    -webkit-mask-image: url("../../../public/assets/icons/ui/minus.svg");
}

.timelineStrip__stepIcon--plus {
    mask-image: url("../../../public/assets/icons/ui/plus.svg");
    -webkit-mask-image: url("../../../public/assets/icons/ui/plus.svg");
}

.timelineStrip__stepLabel {
    display: inline-block;
    min-width: 0;
    color: inherit;
    font: inherit;
    font-family: var(--font-numeric);
}

.timelineStrip__buttonIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.timelineStrip__playbackButton .timelineStrip__buttonIcon {
    mask-image: url("../../../public/assets/icons/timeline/play.svg");
    -webkit-mask-image: url("../../../public/assets/icons/timeline/play.svg");
}

.timelineStrip__playbackButton.is-playing .timelineStrip__buttonIcon {
    mask-image: url("../../../public/assets/icons/timeline/pause.svg");
    -webkit-mask-image: url("../../../public/assets/icons/timeline/pause.svg");
}

.timelineStrip__loopButton .timelineStrip__buttonIcon {
    mask-image: url("../../../public/assets/icons/timeline/loop.svg");
    -webkit-mask-image: url("../../../public/assets/icons/timeline/loop.svg");
}

.timelineStrip__time,
.timelineStrip__speedLabel {
    color: var(--c-font-muted);
    font: var(--font-console);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.timelineStrip__time {
    font-family: var(--font-numeric);
}

.timelineStrip__timeGroup {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--gap-1) * 0.5);
    padding: 0 var(--pad-1);
}

.timelineStrip__timeSeparator {
    color: var(--c-font-muted);
    font: var(--font-console);
    font-family: var(--font-numeric);
    white-space: nowrap;
}

.timelineStrip__speedDropdown {
    width: fit-content;
    min-width: calc((var(--timeline-speed-width-ch, 4) * 1ch) + (var(--pad-1) * 2));
    z-index: calc(var(--z-overlay) + 3);
}

.timelineStrip__speedDropdown[open] {
    z-index: var(--z-modal);
}

.timelineStrip__speedDropdownTrigger.sidebarExampleDropdown__trigger {
    height: var(--timeline-control-size);
    min-height: var(--timeline-control-size);
    padding: 0 var(--pad-1);
    border-radius: var(--timeline-control-radius);
    box-shadow: none;
}

.timelineStrip__toolCluster > :first-child .timelineStrip__speedDropdownTrigger.sidebarExampleDropdown__trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.timelineStrip__toolCluster > :last-child.timelineStrip__button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.timelineStrip__speedDropdown .sidebarExampleDropdown__text {
    gap: 0;
}

.timelineStrip__speedDropdown .sidebarExampleDropdown__label {
    font-family: var(--font-numeric);
}

.timelineStrip__speedDropdown .sidebarExampleDropdown__label {
    text-align: center;
}


.timelineStrip__speedDropdownMenu.sidebarExampleDropdown__menu {
    top: auto;
    bottom: calc(100% + var(--gap-1));
    left: 0;
    right: auto;
    min-width: 100%;
    width: 100%;
    z-index: 1;
}

.timelineStrip__speedDropdown.is-disabled > .sidebarExampleDropdown__trigger {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
    opacity: var(--opacity-disabled);
    cursor: default;
    pointer-events: none;
}

.timelineStrip__range {
    min-width: 0;
    flex: 1 1 auto;
    position: relative;
    height: var(--timeline-control-size);
}

.timelineStrip__rangeTrack,
.timelineStrip__rangeFill,
.timelineStrip__rangeThumb {
    position: absolute;
    display: block;
}

.timelineStrip__rangeTrack,
.timelineStrip__rangeFill {
    top: 50%;
    height: var(--timeline-track-size);
    border-radius: 999px;
    transform: translateY(-50%);
}

.timelineStrip__rangeTrack {
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--c-font-muted) 58%, transparent);
}

.timelineStrip__rangeFill {
    left: 0;
    width: 0;
    background: color-mix(in srgb, var(--c-accent) 82%, var(--c-font-muted));
}

.timelineStrip__rangeThumb {
    top: 50%;
    left: 0;
    width: var(--timeline-thumb-size);
    height: var(--timeline-thumb-size);
    border: var(--border-1) solid color-mix(in srgb, var(--c-font) 92%, transparent);
    border-radius: 50%;
    background: var(--c-surface-solid);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-surface-interactive) 55%, transparent);
    transform: translate(-50%, -50%);
}

.timelineStrip__rangeInput {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.timelineStrip__rangeInput::-webkit-slider-runnable-track {
    height: var(--timeline-track-size);
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.timelineStrip__rangeInput::-moz-range-track {
    height: var(--timeline-track-size);
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.timelineStrip__rangeInput::-webkit-slider-thumb {
    width: var(--timeline-thumb-size);
    height: var(--timeline-thumb-size);
    margin-top: calc((var(--timeline-track-size) - var(--timeline-thumb-size)) * 0.5);
    border: 0;
    border-radius: 50%;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.timelineStrip__rangeInput::-moz-range-thumb {
    width: var(--timeline-thumb-size);
    height: var(--timeline-thumb-size);
    border: 0;
    border-radius: 50%;
    background: transparent;
}

.timelineStrip__rangeInput:focus {
    outline: none;
}

.timelineStrip__range:focus-within .timelineStrip__rangeThumb {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 58%, transparent);
}

.timelineStrip__button:disabled,
.timelineStrip__rangeInput:disabled {
    cursor: default;
}

.timelineStrip__button:disabled {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
    opacity: var(--opacity-disabled);
}