.ffz--tab-container {
	@extend .ffz--outer-container;

	header:focus {
		outline: none;

		.tab.active {
			box-shadow: inset 0 0 0 1px #7d5bbe,
				0 0 6px -2px #7d5bbe;
		}
	}

	.tab {
		cursor: pointer;
		position: relative;

		border-top: 1px solid;
		border-right: 1px solid;
		&:first-child { border-left-width: 1px; border-left-style: solid }

		border-color: $border-light;

		.tw-theme--dark & {
			border-color: $border-dark;
		}

		&.active:after {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			content: '';
			border-bottom: 4px solid #6441a4;
		}
	}

	& > section {
		@extend .ffz--inner-container;
	}
}