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-start-start-radius: 4px;
				border-end-start-radius: 4px;
				border-inline-start: 1px solid var(--fill-quinary);
			}

			&:last-of-type {
				border-start-end-radius: 4px;
				border-end-end-radius: 4px;
				border-inline-end: 1px solid var(--fill-quinary);
			}

			.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;
				}
			}
		}

		// focus-ring if tabbox is not marked as clicked (to avoid blinking)
		&:not([clicked]) tab:focus-visible {
			outline: none;
			// outline should appear around hbox with rounded corners
			hbox {
				outline: var(--color-focus-outer-border) solid var(--width-focus-outer-border) !important;
				z-index: 1;
			}
		}
	}
	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%;
		}
	}
}