@import "../../custom-controls/assets/scss/variables";

a{
	color:$color-blue;
	&:focus{
		box-shadow: 0 0 0 1px rgba($color-blue,0.8);
	}
}
.button{
	background: $color-light-gray;
	border-color: $color-blue;
	color:$color-blue;
	font-weight: 600;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

	&:hover{
		background: $color-white;
		color:$color-blue;
	}
}

.select2-container--default{
	.select2-selection--single{
		height: 32px;

		.select2-selection__arrow{
			b{
				margin-top: 0;
			}
		}
	}


}
.tg-section-separator {
	display: block !important;
	margin-top: 4px;
}

.customize-section-description {

	.colormag-section-description {

		ul {
			margin: 0;

			> li {
				list-style: none;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		a {
			font-style: italic;
		}
	}
}
.customize-control {
	background:#fff;
	box-sizing: border-box;
	margin-bottom: 0;
	padding: 8px 12px;
	position: relative;

	&.customize-control-colormag-typography {
		select {
			font-size: 13px;
		}
	}

	&.customize-control-colormag-upgrade {
		margin-top: 12px;
		padding: 12px;
		border-radius : 8px;
		border: 1px solid $color-light-gray;
	}

	&.customize-control-colormag-title {
		padding: 12px;

		.customize-control-title {
			color: $color-blue;
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 0px;
		}
	}

	.customize-control-title {
		font-size: 13px;
		color: $color-black;
		line-height: 1.5;
		font-weight: 400;
	}

	.colormag-control-tooltip {
		position: absolute;
		right: 10px;
		top: 9px;

		&:hover {
			cursor: pointer;
		}
	}

	.attachment-media-view{
		.button-add-media{
			background: $color-light-gray;
			&:hover{
				background: $color-white;
			}
		}
	}

	select,
	input[type]:not([type=range]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
	.select2-selection--single{
		border-color:$color-light-gray;
		border-radius: 2px;

		&:hover {
			border-color:$color-dark-gray;
		}

		&:focus {
			border-color:$color-blue;
			box-shadow: 0 0 0 0 #2271b1;
			outline: 0 solid transparent;
		}
	}

	.customize-inside-control-row {
		padding-bottom: 0;
		padding-top: 0;
	}

	&.customize-control-radio,
	&.customize-control-checkbox {
		.customize-inside-control-row {
			padding-bottom: 6px;
			padding-top: 6px;
		}
	}

	&.has-responsive-switchers {

		.responsive-switchers {
			position: unset;
			right: 0;
			top: -3px;
			width: 26px;
			display: flex;
			overflow: hidden;
			transition: all 0.3s;

			&:hover {
				width: 78px;

				li {
					display: block;
				}
			}

			li {
				float: left;
				line-height: 0;
				margin: 0;
				padding-right:2px;
				display: none;

				&.active {
					display: block;

					button	{
						color: $color-blue;
					}
				}

				button {
					background: transparent;
					border: none;
					color: rgba($color-black, 0.5);
					cursor: pointer;
					outline: none;
					padding: 2px;

					i {
						font-size: 14px;
						line-height: 20px;
					}
				}
			}
		}

		.control-wrap {

			&:not(.active) {
				display: none;
				width: 100%;
			}
		}
	}
}

#customize-theme-controls {

	.in-sub-panel & {

		.customize-pane-child.current-panel-parent {
			transform: translateX(-100%);
		}
	}

	.customize-pane-child.current-section-parent {
		transform: translateX(-100%);
	}

	.control-section {

		&.open {
			height: 100%;
		}

		&.control-section-colormag_section {

			.accordion-section {
				margin-left: -12px;
				margin-right: -12px;
			}

			.accordion-section-title {
				background-color: $color-white;
				border-bottom: 1px solid $color-light-gray;
				border-left: 2px solid $color-light-gray;
				color: $color-black;
				transition: .15s color ease-in-out, .15s background-color ease-in-out, .15s border-color ease-in-out;
			}

			.accordion-section-title:after {
				color: #AEAEAE;
			}

			.accordion-section-title:hover:after {
				color: $color-blue;
			}
		}
	}
}

.colormag-hide {
	display: none !important;
}

.customize-control-checkbox,
.customize-control-radio{
	padding-bottom: 5px;
	padding-top: 5px;
}

li.colormag-upsell-accordion-section {

	h3 {

		&.accordion-section-title {
			background-color: $color-blue !important;
			border-left-color: #0073aa;
			color: #fff !important;
			padding: 0;
			border-left-width: 2px;

			a {
				color: #fff;
				display: block;
				padding: 8px 0;
				text-decoration: none;
				line-height: 1.2;

				&:focus {
					box-shadow : none;
				}
			}

			&:after {
				color: #fff !important;
			}
		}

		a {

			&::after {
				color: #fff;
			}
		}
	}
}

#customize-theme-controls {
	.control-section-colormag-upsell-section {
		.accordion-section-title {
			border: none;
			border-left: 2px solid $color-dark-blue;

			&:hover,
			&:focus {
				border-left: 2px solid $color-dark-blue !important;
			}
		}
	}

	.control-panel-colormag_panel,
	.control-section-colormag_section {
		.accordion-section-title {
			padding: 11px 12px 11px 10px;
			line-height: 1.2;

			&:after {
				color: $color-dark-gray;
				font-size: 20px;
				top: calc(50% - 9px);
			}

			&:hover,
			&:focus {
				background: #FAFAFA;
				color: $color-black;
				border-left: 2px solid $color-blue;
			}
		}
	}

	.accordion-section-title {
		padding-left: 10px;
		border-color:$color-light-gray;
		color: $color-black;
		font-weight: 600;
		border-left-width: 2px;

		&:hover,
		&:focus {
			background: #FAFAFA;
			color: $color-black;
			border-left: 2px solid $color-blue;
		}

		&:after {
			color: $color-dark-gray;
			font-size: 20px;
			top: calc(50% - 9px);
		}
	}
}

#customize-controls {
	.control-section {
		&:hover {
			>.accordion-section-title {
				background: #FAFAFA;
				color: $color-black;
				border-left: 2px solid $color-blue;
			}
		}
		.accordion-section-title {
			&:hover {
				background: #FAFAFA;
				color: $color-black;
				border-left: 2px solid $color-blue;
			}
			&:focus {
				background: #FAFAFA;
				color: $color-black;
				border-left: 2px solid $color-blue;
			}
		}
	}
}