#root-video-editor {
	height: 100%;
	background-color: #fff;

	.godam-video-list {

		&-wrapper {
			margin-left: -20px;

			@media screen and (max-width: 782px) {
				margin-left: 0;
			}
		}

		&-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 1rem;
			flex-wrap: wrap;
		}

		&__title {
			font-size: 1.75rem;
			font-weight: 400;
		}

		&__filters {

			@media screen and (max-width: 480px) {
				width: 100%;
			}

			&__search {
				position: relative;

				svg {
					position: absolute;
					top: 0.75rem;
					left: 0.75rem;

					width: 1.25rem;
					aspect-ratio: 1;
				}

				input {
					height: 3rem;
					width: 18.74rem;
					border: 1px solid rgba(225, 225, 225, 1);
					padding-left: 2.5rem;

					font-size: 0.875rem;
					border-radius: 0.5rem;

					&::placeholder {
						color: rgba(119, 119, 119, 1);
					}

					&:focus {
						border: 1px solid rgba(56, 88, 233, 1);
					}

					@media screen and (max-width: 480px) {
						width: 100%;
					}
				}
			}
		}

		&-videos {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 1.5rem;
			padding-bottom: 8rem;

			@media (max-width: 1600px) {
				grid-template-columns: repeat(4, 1fr);
			}

			@media (max-width: 1200px) {
				grid-template-columns: repeat(3, 1fr);
			}

			@media (max-width: 768px) {
				grid-template-columns: repeat(2, 1fr);
			}

			@media (max-width: 480px) {
				grid-template-columns: repeat(1, 1fr);
			}
		}

		&__video {
			position: relative;
			border: 1px solid rgba(246, 246, 246, 1);
			border-radius: 12px;
			overflow: hidden;
			transition: all 0.25s ease-in-out;
			cursor: pointer;

			&:hover, &:focus {
				border: 1px solid var( --wp-components-color-accent, #ab3a6c );
				scale: 1.05;
			}

			&__thumbnail {
				position: relative;
				max-height: 260px;
				aspect-ratio: 16 / 9;

				img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: contain;

					&.no-thumbnail {
						object-fit: cover;
					}
				}

				&__time {
					background: rgba(33, 33, 33, 0.8);
					padding: 0.25rem 0.5rem;
					border-radius: 0.25rem;

					position: absolute;
					right: 0.75rem;
					bottom: 1rem;
				}

				&__overlay {
					z-index: 11;
					pointer-events: auto;
					height: 2rem;
					width: 2rem;
					border-radius: 50%;
					background: rgba(33, 33, 33, 0.8);
					padding: 0;
					cursor: pointer;

					position: absolute;
					top: 1rem;
					right: 0.75rem;

					display: flex;
					justify-content: center;
					align-items: center;

					svg {
						padding: 0;
						fill: #fff;
					}
				}
			}

			&__info {
				padding: 0.75rem;

				h3, p {
					margin: 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				p {
					margin-top: 0.75rem;
				}
			}

			&.disabled {
				cursor: not-allowed;

				&:hover, &:focus {
					border: 1px solid rgba(246, 246, 246, 1);
					scale: 1;
				}

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(255, 255, 255, 0.5);
					z-index: 10;
					border-radius: 12px;
				}
			}
		}
	}

	.video-canvas-wrapper {
		max-width: 90%;

		@media screen and (min-width: 1440px) {
			max-width: 80%;
		}
	}
}
