@import "inc/media_upload";
@import "inc/content_library";
@import "inc/embed_information";
@import "inc/admin_options";
@import "inc/visual_editor";

.size_label {
	width: 50px;
	text-align: right;
	display: block;
	float: left;
	margin: 3px 10px 0 0;
}

.uo-tclr-admin {}

.uo-tclr-admin * {
	box-sizing: border-box;
}

.uo-tclr-admin .tablenav-pages-navspan {
	box-sizing: content-box;
}

.uo-tclr-admin .uo-tclr-bubble {
	background: #fff;
	border-radius: 3px;
	margin-top: 5px;
	padding: 20px;
	border: 1px solid #cdcdcd;
}

	.uo-tclr-admin .uo-tclr-warning {
		width: 100%;
		padding: 12px 15px;
		color: #9f6000;
		background: #feefb3;

		position: relative;
	}

		.uo-tclr-admin .uo-tclr-warning--with-icon {
			padding-left: 40px;
		}

		.uo-tclr-admin .uo-tclr-warning--with-icon:before {
			content: '';
			
			width: 16px;
			height: 16px;

			display: inline-block;

			position: absolute;
			top: 50%;
			left: 15px;
			transform: translateY(-50%);

			background: url('data:image/svg+xml;utf8,<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%239f6000" d="M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" class=""></path></svg>') no-repeat center center;
			background-size: contain;
		}

	.uo-tclr-admin .uo-tclr-bubble__content {
		width: 100%;
		margin-top: 20px;
	}

		.uo-tclr-admin .uo-tclr-bubble__content p {
			margin: 0;
		}

		.uo-tclr-admin .uo-tclr-bubble__content ul {
			margin: 3px 0;
			padding: 0;
		}

			.uo-tclr-admin .uo-tclr-bubble__content ul li {
				list-style: none;
				padding: 3px 0 3px 15px;
				margin-bottom: 0;
				position: relative;
			}

			.uo-tclr-admin .uo-tclr-bubble__content ul li:before {
				content: '';
				width: 10px;
				height: 2px;
				border-radius: 150px;
				background: #202020;

				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}

		.uo-tclr-admin .uo-tclr-file-manager {
			background: #fff;
			border: 1px solid #cdcdcd;
			box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, .2);
			border-radius: 3px;
			padding: 10px 15px 5px 15px;
			margin: 20px 0;
		}

			.uo-tclr-admin .uo-tclr-file-manager .file-selector {
				font-size: 15px;
			}

			.uo-tclr-admin .file-selector .structure-dir-btn:hover {
				background: transparent !important;
			}

		.uo-tclr-btn-media {
			outline: none;
			display: inline-block;
			font-weight: 400;
			text-align: center;
			white-space: nowrap;
			vertical-align: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			border: 1px solid transparent;
			padding: 5px 15px;
			font-size: 14px;
			line-height: 1.5;
			border-radius: 3px;
			background-color: transparent;
			transition: color 150ms ease-in-out, background-color 150ms ease-in-out,border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
			cursor: pointer;
			box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);

			color: #e84454;
			border-color: #e84454;
		}

			.uo-tclr-btn-media:hover {
				color: #fff;
				background: #e84454;
			}

			.uo-tclr-btn-media:active,
			.uo-tclr-btn-media:focus {
				box-shadow: 0 0 0 0.2rem rgba(232,68,84,.5);
			}
.uo-tclr-admin .uo-plugins-header {
	width: 100%;
}
.uo-tclr-admin .uo-plugins-header__title {
	font-size: 25px;
	color: #4c4c4c;
	font-weight: 600;
	line-height: 1.2;
}
.uo-tclr-admin .uo-plugins-header__author {
	width: 100%;
}
.uo-tclr-admin .uo-plugins-header__author span {
	display: inline-block;
	vertical-align: bottom;
	margin-right: 5px;
}
.uo-tclr-admin .uo-plugins-header__logo {
	display: inline-block;
	vertical-align: bottom;
}

/**
 * Buttons
 */

.tclr-btn {
	$main_class: &;

	outline: none;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 5px 15px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 3px;
	background-color: transparent;
	transition: color 150ms ease-in-out, background-color 150ms ease-in-out,border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
	cursor: pointer;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
	position: relative;

	&:not(:last-child) {
		margin-right: 10px;
	}

	&--primary {
		color: #0790e8;
		border-color: #0790e8;

		&#{ $main_class }--loading,
		&#{ $main_class }--disabled,
		&:disabled,
		&:hover,
		&:focus {
			color: #fff;
			background-color: #0790e8;
		}

		&:not(#{ $main_class }--disabled):active,
		&:not(#{ $main_class }--disabled):focus {
			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5);
		}
	}

	&--secondary {
		color: #6c757d;
	    border-color: #b7b7b7;

		&#{ $main_class }--loading,
		&#{ $main_class }--disabled,
		&:disabled,
		&:hover,
		&:focus {
			color: #fff;
			border-color: #9e9e9e;
			background-color: #9e9e9e;
		}

		&:not(#{ $main_class }--disabled):active,
		&:not(#{ $main_class }--disabled):focus {
			box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, .2);
		}
	}

	&--error {
		color: #e94b35;
		border-color: #e94b35;

		&#{ $main_class }--loading,
		&#{ $main_class }--disabled,
		&:disabled,
		&:hover,
		&:focus {
			color: #fff;
			border-color: #e94b35;
			background-color: #e94b35;
		}

		&:not(#{ $main_class }--disabled):active,
		&:not(#{ $main_class }--disabled):focus {
			box-shadow: 0 0 0 0.2rem rgba(233, 75, 53, .2);
		}
	}

	&--disabled {
		opacity: .6;
		cursor: not-allowed;
	}

	&--loading{
		&,
		&:hover,
		&:focus {
			color: transparent !important;
		}

		&:before {
			content: '';

			width: 16px;
			height: 16px;

			background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNzUuNCAxMjYuNjNhMTEuNDMgMTEuNDMgMCAwIDEtMi4xLTIyLjY1IDQwLjkgNDAuOSAwIDAgMCAzMC41LTMwLjYgMTEuNCAxMS40IDAgMSAxIDIyLjI3IDQuODdoLjAyYTYzLjc3IDYzLjc3IDAgMCAxLTQ3LjggNDguMDV2LS4wMmExMS4zOCAxMS4zOCAwIDAgMS0yLjkzLjM3eiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIxIi8+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgNjQgNjQiIHRvPSIzNjAgNjQgNjQiIGR1cj0iMTgwMG1zIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvZz48L3N2Zz4=) center center no-repeat;
			background-size: contain;

			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);

			color: #fff;
		}
	}
}

/**
 * Replace content
 */

.tclr-replace-content-container {
	padding: 15px 10px;

	$modal_class: '.tclr-replace-content';

	&, * {
		box-sizing: border-box;
	}

	/* Hide content outside modal box */
	#tclr-replace-content & {
		display: none;
	}

	#{ $modal_class }__step-2 {
		display: none;

		#bookmark-confirmation,
		#all-confirmation {
			display: none;
		}
	}

	#{ $modal_class }__title {
		font-weight: 600;
		font-size: 16px;
	}

	#{ $modal_class }__description {
		font-size: 15px;
		margin-top: 15px;
	}

	#{ $modal_class }__actions {
		.tclr-btn {
			margin-top: 8px;
		}
	}

	#{ $modal_class }__info {
		width: 100%;
		padding: 12px 15px;
		color: #004085;
		background: #cce5ff;
		line-height: 1.5;
		position: relative;

		margin-top: 15px;
	}

	#{ $modal_class }__warning {
		width: 100%;
		padding: 12px 15px;
		color: #9f6000;
		background: #feefb3;
		line-height: 1.5;
		position: relative;

		margin-top: 15px;
	}
}