.video-panel-header {
  section {
    container-type: inline-size;
    container-name: video-panel-header;

    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--size-40);
  }

  .cr-page-header {
    padding: 0;
    z-index: var(--z-10);
  }

  .cr-page-header h2 {
    margin-block: var(--size-80);
    margin-right: var(--size-40);
    width: 100%;

    @container video-panel-header (min-width: 450px) {
      width: fit-content;
    }
  }
}

.video-panel-options {
  display: flex;
  gap: var(--size-80);
  align-items: center;
  margin-right: auto;
}

.video-panel-options-wrapper {
  display: flex;
  align-items: center;
  gap: var(--size-80);
}

#fullscreen,
.volume-section {
  display: flex;
  align-items: center;
  gap: var(--size-40);
  z-index: 10;

  fluent-info-icon {
    display: flex;
  }
}

.btn-container {
  display: flex;
}

.volume-controller-wrapper {
  display: flex;
  padding: 4px 8px;
  flex-direction: column;
  align-items: flex-start;
}

.align-icon {
  display: flex;
  align-items: center;
}

.fullscreen-info-tooltip {
  width: 312px;
  display: flex;
  font-size: 12px;
}

.manage-videos-dialog .la-dialog {
	&[open] {
		min-width: 650px;
		gap: var(--size-120);
		padding-top: var(--size-120);
	}

	.video-card {
		border-bottom: 1px solid var(--color-neutral-stroke-2);
		padding-left: 0;
		.preview {
			width: 16%;
			img {
				object-fit: contain;;
			}
		}
		.info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: var(--size-40);
		}
	}

	.header {
		position: relative;
		justify-content: flex-start;
		gap: 1rem;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: var(--color-neutral-stroke-2);
		}

		h2 {
			font-size: var(--size-160);
		}

		a {
			color: var(--colors-brand-100);
			text-decoration: none;
		}

		.video-types-tab {
			display: flex;
			align-items: center;
			gap: var(--size-160);
			margin-right: auto;

			la-button .la-button {
				padding-block: 1rem;
				padding-inline: 0;
			}

			la-button.active-tab .la-button {
				font-weight: 600;

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					width: 75%;
					translate: -50%;
					left: 50%;
					height: 3px;
					background-color: var(--color-palette-brand-compound-fg-1);
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
					z-index: 10;
				}
			}
		}

		.la-button {
			font-size: var(--size-140);
			position: relative;
		}
	}

}
/** @prettier */

rundown-timeline {
	--rundown-timeline-width: 100%;
	--rundown-timeline-height: 100px;

	/* Used for bumpers and segments */
	--segment-font-size: var(--size-120);
	--segment-line-height: var(--size-160);
	--segment-padding: var(--size-80);

	display: flex;
	box-sizing: border-box;
	height: max(100px, var(--rundown-timeline-height));
	width: 100dvw;
	padding-inline: var(--size-160);

	.timeline-container {
		display: flex;
		overflow-x: scroll;
		margin-bottom: var(--size-160);

		&::-webkit-scrollbar {
			height: var(--size-80);
			background-color: var(--colors-neutral-28);
			border-radius: var(--size-20);
		}

		&::-webkit-scrollbar-thumb {
			height: var(--size-60);
			background-color: var(--color-neutral-fg-3);
			border: 1px solid var(--colors-neutral-28);
			border-radius: var(--size-20);
		}
	}
}

#expanded-timeline {
	position: relative;
	display: block;
	height: inherit;
}

.track-container {
	--minute-width: 4px;

	position: relative;
	height: inherit;
	padding-inline: var(--size-20);

	.track-segments {
		position: relative;
		list-style-type: none;
		margin-block: 0;
		padding: 0;
		/* To match with segment sizes */
		min-height: calc(
			var(--segment-font-size) + var(--segment-line-height) + var(--segment-padding)
		);
		display: flex;
	}

	.track-segments li {
		position: relative;
		display: flex;
	}

	.dropzone {
		background-color: var(--colors-neutral-white);
		height: 120%;
		width: var(--minute-width);
		border-radius: var(--size-120);
	}
}

.segment {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background-color: var(--colors-neutral-24);
	color: var(--colors-neutral-white);
	padding: var(--segment-padding);
	cursor: pointer;
	transition:
		transform ease-in-out 0.2s,
		background-color ease-in-out 0.2s;
	border: 1px solid var(--colors-alpha-grey-12-60);
	text-wrap: nowrap;
	text-overflow: ellipsis;
	font-size: var(--segment-font-size);
	line-height: var(--segment-line-height);
	width: 100%;

	&:hover {
		background-color: var(--colors-neutral-16);
	}

	&:active {
		transform: scale(0.975);
		cursor: grabbing;
	}

	&.no-hover:where(&:active, &:hover) {
		background-color: var(--colors-neutral-24);
		transform: none;
		cursor: default;
	}

	&.active {
		--segment-bg-color: var(--colors-brand-70);
		--segment-bg-color-hover: var(--color-palette-brand-bg-hover);

		background-color: var(--segment-bg-color);

		&:hover {
			background-color: var(--segment-bg-color-hover);
		}

		span {
			color: var(--colors-neutral-white);
		}
	}

	span {
		max-width: 100%;
		text-wrap: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: var(--size-120);
		line-height: var(--size-160);
		color: var(--colors-neutral-80);
		user-select: none;
	}

	&:disabled {
		background-color: var(--colors-neutral-16);
		cursor: not-allowed;
		pointer-events: none;

		&:active {
			transform: scale(1);
		}

		span {
			color: var(--colors-alpha-white-30);
		}
	}

	&.bumper {
		width: clamp(15ch, 100%, 25ch);
		height: fit-content;

		&.end {
			margin-left: 0.25rem;
			right: 0;
		}

		&.start {
			margin-right: 0.25rem;
			left: 0;
		}

		&.start, &.end {
			position: sticky;
			top: 0;
			z-index: 21;
			border-bottom: 35px solid var(--colors-alpha-grey-12-60);
			padding: 9px;
		}

		/* For when bumpers are disabled but need to be shown as active due to video playback */
		&.active:is(:disabled, :disabled:hover) {
			background-color: var(--colors-brand-70);
			cursor: not-allowed;

			span {
				color: var(--colors-neutral-white);
			}
		}
	}
}

#track,
.time-marker,
.minute-marker,
.minute-marker-text {
	position: absolute;
	user-select: none;
}

.minute-marker {
	background-color: var(--color-neutral-stroke-1);
	height: 9px;
	width: 2px;
	bottom: -0.75rem;
	border: none;

	&.passed {
		background-color: var(--color-palette-brand-fg-1);
		width: 4px;
	}
}

.minute-marker-text {
	color: var(--color-neutral-fg-2);
	font-size: var(--size-100);
	bottom: -1.5rem;
	translate: -50%;
	left: 0.1rem;
}

#track {
	--completed-track-progress: 0;
	--scrubber-offset: 0px;

	background-color: var(--color-neutral-stroke-1);
	height: 1px;
	bottom: 40%;

	&::before {
		content: "";
		position: absolute;
		background-color: var(--color-palette-brand-fg-1);
		height: 3px;
		width: var(--completed-track-progress);
		max-width: 100%;
		transition: width ease-in-out 100ms;
		z-index: 10;
	}

	.scrubber {
		position: absolute;
		background-color: var(--color-palette-brand-fg-1);
		height: 10px;
		width: 3px;
		left: 0;
		bottom: -5px;
		border-radius: 4px;
		z-index: 20;
		translate: var(--scrubber-offset);
		transition: transform ease-in-out 100ms;
	}
}

.ai-mode .segment.active {
	background-color: var(--color-palette-brand-fg-1);

	&:hover {
		background-color: var(--color-palette-brand-compound-fg-hover-1);
	}

	&:focus {
		background-color: var(--color-palette-brand-compound-fg-pressed-1);
	}
}