/*****************************************/
/* Customizer control heading style
/*****************************************/

/**
 * Import configuration file with variables.
 */
@import '../../../../assets/sass/config';


#customize-controls {
	.customize-control.customize-control-sinatra-heading {
		&:after {
			margin-top: 1px;
		}

		.sinatra-heading-top-space {
			height: 12px;
			margin: -17px -12px 0 -12px;
			background-color: #eee;
			border-bottom: 1px solid #ddd;
		}
	}
}

.sinatra-heading-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background-color: $color_5;
	color: #555d66;
	margin: -16px -12px -2px -12px;
	padding: 14px 12px;
	border-bottom: 1px solid #ddd;

	&.sub-heading {
		margin-top: -6px;
		background-color: rgba(0,0,0,0);
		color: #777;
		border-bottom: none;

		&:after {
			display: none;
		}
	}

	&.toggle-heading:hover {
		cursor: pointer;

		.sinatra-heading-toggle label {
			background-color: #f0f0f0;
			
			&:before {
				color: #000;
			}
		}
	}

	&.top-spacer {
		margin-top: 0;
	}

	.sinatra-control-heading {
		margin-right: auto;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
	}

	.sinatra-heading-toggle {
		label {
			pointer-events: none;
			margin-left: 6px;
			display: flex;
			align-items: center;
			border-radius: 50%;

			&:before {
				content: "\f140";
				display: block;
				padding: 1px 2px 1px 0px;
				speak: none;
				border-radius: 50%;
				color: #72777c;
				font: normal 20px/1 dashicons;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				text-decoration: none !important;
			}
		}

		input[type="checkbox"] {
			display: none;

			&:checked + label {
				transform: rotate(180deg);
			}
		}
	}
}