.shapla-toggle {
	margin: 1em 0 !important;

	&-title {
		display: block;
		padding: 15px 10px;
		outline: 0;
		cursor: pointer;
		position: relative;

		&:after {
			position: absolute;
			right: 15px;
			font: 400 20px/1 dashicons;
			margin-left: -1px;
			padding-right: 3px;
			vertical-align: top;
			content: "\f132";
		}

		&.ui-state-active:after {
			content: "\f460";
		}
	}

	&-content {
		padding: 20px;
		background-color: #f1f1f1;
	}

	&--normal .shapla-toggle-title {
		background: #9e9e9e;
		color: white;
		font-weight: 600;
	}

	&--stroke .shapla-toggle-title {
		border: 1px solid #363f48;
		font-weight: 600;

		&:after {
			color: #363f48;
		}
	}
	&--stroke .shapla-toggle-content {
		padding: 20px;
		background-color: #ffffff;
		border: 1px solid #363f48;
		border-top: none;
	}
}