.wpcb-configurator-form {

	.wpcb-configurator-tab-list {
		display: block;
		margin: 0;
		margin-bottom: 12px;
		padding: 0;
		border-bottom: 1px solid $template_border;

		ul {
			list-style: none;
			display: flex;
			align-items: center;
			margin: 0;
			margin-bottom: -1px;
			padding: 0;

			li {
				display: block;

				a {
					display: block;
					font-size: 16px;
					padding: 8px 16px;
					background-color: $template_accent;
					border: 1px solid $template_border;
					border-top-right-radius: 8px;
					border-top-left-radius: 8px;
					text-decoration: none;

					img {
						margin: 0;
						max-height: 36px;
						width: auto;
						
						+ span {
							margin: 0;
							margin-left: 12px;
						}
					}
				}

				.active {
					background-color: $button_background;
					border: 1px solid $button_border;
					color: $button_color;
				}
			}
		}
	}

	.wpcb-configurator-tab-content {
		display: none;
		margin: 0;
		margin-bottom: 12px;
		margin-top: -1px;

		&.active {
			display: block;
		}

		.wpcb-configurator-field:last-child {
			margin-bottom: 0;
		}
	}

	&.wpcb-tabbed-vertical {

		.wpcb-configurator-tabs {
			display: flex;
			width: 100%;
		}

		.wpcb-configurator-tab-list {
			flex: 0 0 20%;
			border-bottom: 0;
			border-right: 1px solid $template_border;

			ul {
				flex-direction: column;
				align-items: flex-start;
				justify-content: stretch;

				li {
					width: 100%;
					
					a {
						display: block;
						width: 100%;
						border-top-right-radius: 0;
						border-top-left-radius: 8px;
						border-bottom-left-radius: 8px;
					}
				}
			}
		}

		.wpcb-configurator-tab-content {
			flex: 0 0 80%;

			&.active {
				display: block;
				padding: 12px;
				width: 200px; // random width to prevent overflow
			}
		}
	}
}
