.shortcode-builder {
	a.group {
		border-radius: 0 0 $radius $radius;
	}

	p.warning-callout {
		&::before {
			display: block;
			width: calc(100% + 36px);
			height: 1px;
			content: '';
			background: $light_border;
			position: absolute;
			left: -18px;
			top: -10px;
			z-index: 1;
		}
	}
	section {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		border-top: 1px solid $light_border;
		&:hover,
		&:focus-within {
			h4 {
				text-decoration: underline;
			}
		}
		&.first {
			border-top: none;
		}
		&.full {
			flex-wrap: wrap;
			.shortcode-builder--label,
			.shortcode-builder--fields {
				width: 100%;
			}
			.shortcode-builder--label {
				border: none;
				border-bottom: 1px solid $light_border;
			}
		}
		input[type='text'],
		input[type='email'],
		input[type='number'],
		textarea {
			width: 100%;
		}
		.select2-container {
			min-width: 100%;
			width: 100%;
		}
	}
	&--label,
	&--fields {
		padding: 20px;
	}
	&--label {
		background-color: #fcfcfc;
		border-right: 1px solid $light_border;
		width: 35%;
		padding-right: 30px;
		&.full {
			width: 100%;
		}
		h4 {
			font-size: 14px;
			margin: 0 0 15px !important;
		}
		p {
			font-size: 13px !important;
			line-height: 1.55 !important;
			small {
				padding-top: 10px;
				display: block;
				font-size: 12px !important;
			}
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}
	&--fields {
		padding-top: 22px;
		flex: 1;
		input,
		textarea,
		select {
			width: 100%;
		}
		section {
			width: 104%;
			margin-left: -2%;
			border: none;
		}
		.half {
			width: 50%;
			padding: 0 2%;
		}
		.flex-grid {
			display: flex;
			width: 100%;
			flex-wrap: nowrap;
			justify-content: space-between;
			&--two,
			&--three {
				width: 100%;
				> div {
					width: 48%;
				}
			}

			&--three {
				> div {
					width: 31.333%;
				}
			}
		}

		ul {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			li {
				width: 50%;
				padding-right: 10px;
				label {
					margin-bottom: 0 !important;
				}
			}
		}
	}

	@media screen and (max-width: 1000px) {
		section {
			flex-wrap: wrap;
		}
		&--label,
		&--fields {
			width: 100%;
		}
		&--label {
			border-right: none;
			border-bottom: 1px solid $light_border;
		}
	}

	.flex-input {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		input {
			margin: 0;
			flex: 1;
			border-radius: 3px 0 0 3px;
		}
		span {
			border: 1px solid #e1e1e1;
			border-left: none;
			margin: 0;
			font-weight: 600;
			font-size: 11px;
			text-transform: uppercase;
			padding: 0 15px;
			display: flex;
			align-items: center;
			border-radius: 0 3px 3px 0;
		}
	}

	.nested-component {
		padding: 0;
		position: relative;
		&::after,
		&::before {
			top: 0;
			left: 35px;
			border: solid transparent;
			content: ' ';
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			z-index: 2;
		}
		&::after {
			border-color: rgba(255, 255, 255, 0);
			border-top-color: #fcfcfc;
			border-width: 10px;
			margin-left: -10px;
		}
		&::before {
			border-color: rgba(239, 239, 239, 0);
			border-top-color: $border;
			border-width: 11px;
			margin-left: -11px;
			z-index: 1;
		}

		&--inner {
			padding: 0;
			position: relative;
			&::after {
				clear: both;
				display: table;
				content: '';
			}
		}
		.nested-component {
			.shortcode-builder--label {
				border-left: 6px solid $light_border;
			}
		}
	}
	.section-intro {
		margin: 0 0 10px;
	}
	.section-anchor-nav {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 0;
		padding: 0 0 15px;
		border-bottom: 1px solid $border;
		li {
			margin: 0 10px 5px 0;
			padding: 0;
			font-size: 12px;
		}
		a {
			display: block;
			&:focus,
			&:hover {
				text-decoration: none;
			}
		}
	}
}
