.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: $space-2;
	align-items: center;
	margin-bottom: $space-4;

	.tab {
		display: inline-flex;
		align-items: center;
		min-height: $control-height-sm;
		padding: $space-2 $space-3;
		border: $border-width-base solid $border-color-muted;
		border-left-width: $border-width-accent;
		color: $color-text-medium;
		background: $surface-panel-muted;
		font-family: $font-family-base;
		font-size: $font-size-sm;
		font-weight: $font-weight-semibold;
		line-height: $line-height-base;
		text-transform: uppercase;
		cursor: pointer;
		transition-duration: $motion-base;
		transition-timing-function: $motion-ease;
		transition-property: color, background, border-color;

		&:focus-visible {
			@include focus_ring;
		}

		@include hover_touch {
			color: $color-black;
			background: $color-secondary;
			border-color: $color-secondary;
		}

		&.tab-active,
		&[aria-selected="true"] {
			color: $color-black;
			background: $color-primary;
			border-color: $color-primary;
		}
	}
}

.dropdown,
.popover {
	position: relative;
	display: inline-flex;
}

.dropdown-menu,
.popover-panel,
.tooltip-panel {
	z-index: 40;
	background: $surface-panel;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	box-shadow: 0 14px 36px rgba($color-black, 0.36);
}

.dropdown-menu,
.popover-panel {
	position: absolute;
	top: calc(100% + #{$space-2});
	left: 0;
	min-width: 220px;
	display: none;
}

.dropdown.is-open .dropdown-menu,
.popover.is-open .popover-panel {
	display: block;
}

.dropdown-menu {
	padding: $space-1;

	.dropdown-item {
		display: flex;
		align-items: center;
		gap: $space-2;
		width: 100%;
		min-height: $control-height-sm;
		padding: $space-2 $space-3;
		border: 0;
		color: $color-text-light;
		background: transparent;
		font-family: $font-family-base;
		font-size: $font-size-sm;
		text-align: left;
		cursor: pointer;
		transition-duration: $motion-base;
		transition-timing-function: $motion-ease;
		transition-property: color, background;

		.ph,
		.ph-bold {
			font-size: $icon-size-sm;
		}

		&:focus-visible {
			@include focus_ring;
		}

		@include hover_touch {
			color: $color-black;
			background: $color-secondary;
		}

		&.dropdown-item-danger {
			color: $color-error;

			@include hover_touch {
				color: $color-black;
				background: $color-error;
			}
		}
	}
}

.popover-panel {
	width: min(320px, calc(100vw - #{$space-6}));
	padding: $space-4;

	.popover-title {
		margin: 0 0 $space-2;
		font-size: $font-size-md;
		font-weight: $font-weight-bold;
		text-transform: uppercase;
	}

	.popover-text {
		margin: 0;
		color: $color-text-medium;
		font-size: $font-size-sm;
		line-height: $line-height-relaxed;
	}
}

.tooltip {
	position: relative;
	display: inline-flex;
}

.tooltip-panel {
	position: absolute;
	left: 50%;
	bottom: calc(100% + #{$space-2});
	width: max-content;
	max-width: 260px;
	padding: $space-2 $space-3;
	color: $color-text-light;
	font-size: $font-size-xs;
	line-height: $line-height-normal;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition-duration: $motion-fast;
	transition-timing-function: $motion-ease;
	transition-property: opacity, visibility;
}

.tooltip:hover .tooltip-panel,
.tooltip:focus-within .tooltip-panel,
.tooltip.is-open .tooltip-panel {
	opacity: 1;
	visibility: visible;
}