.vfb-accordion-container {
	border: 1px solid #e5e5e5;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
	box-shadow: 0 1px 1px rgba(0,0,0,.04);

	.outer-border {
		margin: 0;
	}
}

.vfb-accordion-section {
	border-bottom: 1px solid #dfdfdf;
	margin: 0;

	&.open {
		.vfb-accordion-section-content {
			display: block;
		}

		&:hover {
			border-bottom-color: #dfdfdf;
		}
	}
}

.vfb-accordion-section-content {
	display: none;
	padding: 10px 15px;
	overflow: hidden;
	background: $color-white;
}

.vfb-accordion-section-title {
	margin: 0;
	padding: 12px 15px 15px;
	position: relative;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;

	&:after {
		position: absolute;
		top: 12px;
		right: 10px;
		z-index: 1;

	    content: '\f140';
	    border: none;
	    background: 0 0;
	    font: 400 20px/1 dashicons;
	    speak: none;
	    display: block;
	    padding: 0;
	    text-indent: 0;
	    text-align: center;

	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    text-decoration: none !important;
	    color: $color-gray;
	}

	&:focus {
		outline: none;
	}

	&:hover:after,
	&:focus:after {
		color: #777;
		border-color: #aaa transparent;
	}
}

.metabox-holder h3.vfb-accordion-section-title {
	padding: 12px 15px 15px;
}

.cannot-expand {
	.vfb-accordion-section-title {
		cursor: auto;

		&:after {
			display: none;
		}
	}
}

.vfb-control-section {
	.vfb-accordion-section-title {
		border-left: none;
		border-right: none;
		padding: 10px 10px 11px 14px;
		line-height: 21px;
		background: $color-white;

		&:after {
			top: 11px;
		}
	}

	&:hover .vfb-accordion-section-title,
	&.open .vfb-accordion-section-title,
	.vfb-accordion-section-title:hover,
	.vfb-accordion-section-title:focus {
		color: #222;
		background: #f5f5f5;
	}

	&.open .vfb-accordion-section-title {
		border-bottom: 1px solid #dfdfdf;

		&:after {
			content:'\f142';
		}
	}

	.vfb-control-title {
		display: block;
		font-size: 14px;
		line-height: 24px;
		font-weight: 600;
		margin-bottom: 5px;
	}

	select {
		width: 95%;
		height: 28px;
		line-height: 28px;
	}

	input[type="radio"] {
		line-height: 28px;
		margin-right: 5px;
	}

	input[type="text"],
	input[type="number"] {
		width: 95%;
		line-height: 18px;
		margin: 0;
	}

	&.vfb-control-radio label {
		line-height: 32px;
	}

	#vfb-forms-switcher {
		width: 70%;
	}
}