/**
 * Styles for the Media Library component.
 *
 * Used to style and display the custom media library.
 */

$media-library-sidebar-bg: #fff;
$media-library-sidebar-border: #E0E0E0;
$media-library-active-folder: #F5F5F5;
$media-library-button-border: #949494;
$media-library-scrollbar-color:  rgba(128, 128, 128, 0.2);
$godam-gradient: linear-gradient(90deg, #AB3A6C 0%, #E6533A 100%);

#rt-transcoder-media-library-root {
	$sidebar-width: 280px;
	$toggle-width: 25px;
	$toggle-offset: 12px;

	position: relative;

	min-width: $sidebar-width;
	padding: 0;
	border: 1px solid $media-library-sidebar-border;
	display: flex;
	flex-direction: column;
	height: 100%;

	@media (max-width: 900px) {
		width: 100%;
		z-index: 1000;
		height: 100%;
		background: $media-library-sidebar-bg;
	}

	* {
		box-sizing: border-box;
	}

	> * {
		padding: 1.25rem;
		border-bottom: 2px solid $media-library-sidebar-border;
	}

	.folder-container  {
		padding: 0;
		overflow: auto;

		/* WebKit browsers (Chrome, Safari, Edge) */
		&::-webkit-scrollbar {
			width: 3px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: $media-library-scrollbar-color;
			border-radius: 3px;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}

		/* Firefox */
		@supports (scrollbar-width: thin) {
			scrollbar-width: thin;
			scrollbar-color: $media-library-scrollbar-color transparent;
		}

		> * {
			padding: 1.25rem;
			border-bottom: 1px solid $media-library-sidebar-border;
		}
	}

	.tree-container {
		padding-bottom: 5rem;
	}

	.folder-tabs {
		padding: 1.25rem 1rem;
	}


	.components-button {
		border-radius: 0.25rem;
	}

	.button--full {
		width: 60%;
		display: flex;
		position: relative;
		z-index: 1;
	}

	.button--half {
		width: 50%;
	}

	.button-group {
		display: flex;
		gap: 0.75rem;
		width: 100%;
		justify-content: space-between;

		.components-base-control {
			width: 100%;
		}
	}

	.folder-search-bar-container {
		border-radius: 0.25rem;
		border: 1px solid $media-library-button-border;

		.components-input-control {
			background: none;

			.components-input-control__container {
				background: none;
			}
	   	}
	}

	.new-folder-button {
		background: $godam-gradient;
		border-radius: 0.25rem;
		box-shadow: none;
	}

	.multiselect-button {
		color: #1c1c1c;
		background: $media-library-sidebar-bg;
		border: 1px solid $media-library-button-border;
		box-shadow: none;
		width: 100%;
		justify-content: center;

		&:hover {
			background: $media-library-active-folder;
		}
	}

	.control-buttons {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.folder-sort-select {
		flex: 1;
		border-radius: 4px;
		height: 40px;
		min-width: 8rem;
		width: 100%;

		@media (max-width: 782px) {

			select {
				font-size: 13px;
			}
		}
	}

	.search-input {

		@media (max-width: 782px) {

			input {
				font-size: 13px;
			}
		}

		.components-select-control__input {
			padding: 0 26px 0 8px;
		}
		
		.components-input-control__prefix div {
			-webkit-padding-start: 6px;
			padding-inline-start: 6px;
		}
	}

	.folder-list {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;

		&__count {
			font-size: 0.75rem;
			font-weight: 600;
			color: #1c1c1c;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 0.5rem;
			height: 1.5rem;
			min-width: 1.5rem;
			border-radius: 0.5rem;
			background-color: $media-library-active-folder;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		}
	}

	.folder-list__item {
		all: unset;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0.5rem;
		border-radius: 0.375rem;
		background-color: transparent;
		cursor: pointer;
		z-index: 1;

		&:hover {
			background-color: $media-library-active-folder;
		}

		&--active {
			background-color: $media-library-active-folder;
		}
	}

	.folder-list__text {
		font-size: 0.875rem;
		color: #000;
		margin: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.tree-item:hover {
		background: $media-library-active-folder;
	}

	#media-folder-toggle-button {
		background: $godam-gradient;
		color: $media-library-sidebar-bg;
		box-shadow: 2px 2px 3px $media-library-scrollbar-color;
		position: absolute;
		top: 60px;
		min-width: $toggle-width;
		width: $toggle-width;
		height: $toggle-width;
		right: calc(-1 * $toggle-width);
		visibility: visible;
		z-index: 10;
		transition: right 0.18s ease, transform 0.18s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: auto;
		padding: 0;
		margin: 0;
		border: none;
		border-radius: 0 0.25rem 0.25rem 0;

		@media (max-width: 900px) {
			display: none;
		}
	}

	&.hide-sidebar {
		width: 0;
		min-width: 0;
		pointer-events: none;
		overflow: visible;

		> *:not(#media-folder-toggle-button) {
			display: none;
		}

		#media-folder-toggle-button {
			position: absolute;
			top: 60px;
			left: 0;
			right: $toggle-offset;
			visibility: visible;
			pointer-events: auto;
			transition: left 0.18s ease, transform 0.18s ease;

			@media (max-width: 900px) {
				top: 40px;
				display: flex;
			}
		}
	}

	.folder-context-menu__item {
		justify-content: flex-start;
	}

	.close-folder-menu-mobile {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 12px;
		transform: rotate(45deg);
		border: none;
		box-shadow: none;
		padding: 0;
	}

	@media (max-width: 900px) {

		.control-buttons {
			padding-top: 48px;
		}

		.close-folder-menu-mobile {
			display: block;
		}
	}
}


.components-button.has-icon.has-text {
	justify-content: center;
}

.components-button.has-icon.has-text.text-flex-left {
	justify-content: left;
}

.media-frame-menu:has( #rt-transcoder-media-library-root ) {

	.media-menu {
		background: $media-library-sidebar-bg;
		z-index: -1;
		padding: 0;
		top: 0;
		max-width: 100%;
		width: 100%;
	}
}

#wpbody > #rt-transcoder-media-library-root {

	@media (max-width: 900px) {
		position: absolute;
	}
}
