tabbox {
	--color-form-element-base-background: var(--color-sidepane);

	tabs {
		position: relative;
		z-index: 1;
		background: transparent;

		spacer:first-of-type {
			flex: 1;
		}

		tab {
			appearance: none;
			height: 28px;
			margin-top: 0;
			margin-bottom: -14px;
			padding: 0;
			// Since the tab with opacity is weird, we just use hard-coded colors
			@include light-dark(--tabbox-tab-background, #ededed, #252525);
			background: var(--tabbox-tab-background);
			border-block: 1px solid var(--fill-quinary);
			border-inline: 1px solid var(--tabbox-tab-background);
			color-scheme: light dark;

			&:first-of-type {
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				border-left: 1px solid var(--fill-quinary);
			}

			&:last-of-type {
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				border-right: 1px solid var(--fill-quinary);
			}

			@include focus-ring;

			.tab-middle {
				outline: none !important;
				padding: 4px 11px 5px 11px;
			}

			&[visuallyselected=true] {
				tab {
					border-radius: 4px;
				}

				.tab-middle {
					@include windows-form-element-base;

					padding: 4px 11px 5px 11px;
					border-radius: 4px;
				}
			}
		}
	}
	tabpanels {
		appearance: none;
		color-scheme: inherit;
		background: var(--color-sidepane);
		border: 1px solid var(--fill-quinary);
		border-radius: 8px;
		// 8 (original) + 14 (from tabs)
		padding-top: 22px;

		tabpanel {
			min-width: 500px;
			max-width: 100%;
		}
	}
}