/**
 * Studio for Elementor elements.
 */
#ts-el-studio {
	.dialog-widget-content {
		width: 1440px;
		max-width: 100vw;
	}

	// Can't be applied to widget-content or it won't take full height.
	.dialog-message {
		height: 700px;
		max-height: calc(100vh - 100px);
		overflow: auto;
		
	}

	body:not(.ts-el--dark) & {

		::-webkit-scrollbar {
			width: 6px;
			height: 0;
			border-radius: 3px;
		}
		
		::-webkit-scrollbar-button {
			width: 0;
			height: 10px;
		}
		
		::-webkit-scrollbar-thumb {
			background-color: #d1d4d6;
			border: 0px none #d1d4d6;
			border-radius: 3px;
		}
		
		::-webkit-scrollbar-track {
			border: 0px none #fff;
			border-radius: 0;
		}
		
		::-webkit-scrollbar-corner {
			background: transparent;
		}
	}
}

.ts-el-studio {

	// Launcher button.
	&-launch {
		padding: 0 15px;
		margin-left: 7px;
		width: auto;
		color: #fff;
		background: linear-gradient(45deg, #ea2404, #c3175e);
		border-radius: 4px;
		height: 38px;
		line-height: 38px;
		text-transform: uppercase;
		font-size: 11px;
		font-family: Roboto, system-ui, sans-serif;
		font-weight: 500;
		letter-spacing: .05em;
		border: 0;
		vertical-align: bottom;
		box-shadow: 0 2px 2px rgba(0,0,0, .1);
	}

	.dialog-widget-content {
		background: #f9f9f9;

		.ts-el--dark & {
			background: #34383c;
		}
	}

	.dialog-header {
		padding: 0;
	}

	.dialog-message {
		padding: 15px 15px;
	}

	&__header {
		text-align: center;
		color: #6d7882;
		font-size: 13px;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
		height: 50px;
		background: #fff;
		
		.ts-el--dark & {
			color: #eee;
			background: #222;
		}

		&__tab {
			width: auto;
			padding: 17px 26px;
		}

		&__back {
			display: flex;
			align-items: center;
			margin-left: 15px;
		}
	}

	&__btn_preview {
		margin-right: 8px;
		background: #000;
		color: #fff;
	}

	&__brand {
		color: #000;
		font-size: 15px;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 0.04em;
		padding-left: 15px;

		// Flexbox pseudo centering help.
		margin-right: -15px;

		.ts-el--dark & {
			color: #fff;
		}
	}

	&__listing {
		display: flex;
		width: 100%;
		text-align: left;
		// overflow: auto;
		min-height: 100%;
		padding-top: 6px;
	}

	&__filters {
		width: 20%;
		max-width: 250px;
		height: 500px;
		margin-right: 24px;
		padding: 10px 15px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		// overflow: auto;
		position: sticky;
		top: 10px;

		&__item {
			padding: 11px 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			color: #3a3c41;
			text-transform: uppercase;
			letter-spacing: .03em;
			cursor: pointer;

			&:hover,
			&.active {
				color: #93003c;
			}

			.ts-el--dark & {
				color: #efefef;

				&:hover,
				&.active {
					color: #fff;
				}
			}
		}
	}

	&__items {
		flex-grow: 1;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	&__item {
		position: relative;
		width: calc(100% / 3 - 32px);
		margin: 16px;
		padding: 8px;
		background-color: #fff;
		box-shadow: 0 3px 25px -5px rgba(27, 25, 51, .26);
		border-radius: 3px;
		overflow: hidden;
		text-align: center;

		.ts-el--dark & {
			background-color: #404349;
		}

		&__body {
			position: relative;
			min-height: 180px;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		&__name {
			margin-top: 8px;
			font-weight: 500;
			font-weight: 500;
			color: #53565f;
			margin-bottom: 3px;

			.ts-el--dark & {
				color: rgba(255,255,255,.85);
			}
		}

		&__preview {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.5);
			transition: opacity .5s;
			cursor: pointer;

			&:not(:hover) {
				opacity: 0;
			}

			i {
				font-size: 20px;
				color: #d5dadf;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		img {
			max-width: 100%;
		}

		&:hover &__insert {
			transform: none;
			pointer-events: auto;
			cursor: pointer;
		}

		&__insert {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 99%;
			height: 28px;
			background: #fff;
			transform: translateY(100%);
			pointer-events: none;

			.ts-el--dark & {
				background: #404349;
			}
		}
	}

	&__preview {
		width: 100%;
		display: flex;

		img {
			max-width: 100%;
			margin: 0 auto;
			display: block;
		}
	}
}