.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);
  }

	.video-panel-hr {
		border-color: var(--colors-neutral-32);
	}
  .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;
  }
	.context-item {
		padding: var(--size-40);
		border-bottom: 1px solid var(--colors-neutral-50);
	}
	.context-item:last-child {
		border-bottom: none;
	}
}

.btn-container {
  display: flex;
}

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

.volume-section .menu-container {
  z-index: 10000;
}

.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);
		display: flex;
        align-items: center;
        gap: var(--size-120);
        padding-block: var(--size-120);
		
		.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;
		}
	}

}