FrankerFaceZ/styles/widgets/tab-container.scss

@use "container";

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

	header:focus {
		outline: none;

		.tab.active {
			box-shadow: inset 0 0 0 1px var(--color-border-tab-active),
				0 0 6px -2px var(--color-border-tab-active);
		}
	}

	.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: var(--color-border-base);

		&.active:after {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			content: '';
			border-bottom: 4px solid var(--color-border-tab-active);
		}
	}

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