@use "./style";

.ccl-admin {
	margin-top: 20px;
	padding: 1em 26px;
	max-width: 800px;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	box-shadow: 4px 4px 5px 5px rgba(0, 0, 0, 5%);

	@media screen and (max-width: 800px) {
		max-width: none;
	}

	h1 {
		padding: 0.4em 0 0.4em 0.4em;
		text-align: center;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			bottom: -3px;
			left: 12%;
			width: 580px;
			height: 2px;
			background: #ff0060;

			@media screen and (max-width: 880px) {
				width: 240px;
				left: 34.5%;
			}

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

	&__preview {
		border: 1px solid #333;
		background: #fff;
		margin-top: 3em;
		margin-bottom: 1em;
		padding: 1em 0.8em;
		display: flex;

		@media screen and (max-width: 782px) {
			display: block;
		}

		h2 {
			display: block;
			width: 100px;
		}
	}

	&__info {
		position: relative;

		@media screen and (max-width: 782px) {
			margin-bottom: 1em;
			height: 66px;
		}

		.components-base-control {
			position: absolute;
			bottom: 0;
			display: block;
			margin-top: auto;

			&__field,
			&__help {
				margin-top: 0;
				margin-bottom: 0;
			}
		}
	}

	&__preview-wrap {
		width: 100%;
	}

	&__settings {

		h2 {
			margin-top: 2.6em;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				bottom: 0;
				width: 560px;
				height: 1px;
				background: #ff0060;

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

	&__container {
		display: flex;

		.ccl-admin__inputs {
			width: 50%;
			padding-right: 1em;
			padding-left: 1em;
		}

		@media screen and (max-width: 520px) {
			display: block;

			.ccl-admin__inputs {
				max-width: none;
				width: 100%;
				padding-right: 0;
				padding-left: 0;
			}
		}
	}
}

#wpcontent {

	@media screen and (max-width: 960px) {
		padding: 20px;
	}

	@media screen and (max-width: 782px) {
		padding: 10px;
	}
}