.tabs {
	z-index: var(--z-nav);
	background-color: white;
	border-bottom: 1px solid var(--color-neutral-200);

	> ul {
		display: flex;
	}

	li {
		flex: 1;
		color: var(--text-color-secondary);
		text-transform: uppercase;
		text-align: center;

		&:has(svg) {
			font-size: var(--text-xs);
			text-transform: initial;
		}

		> a {
			display: block;
			padding: calc(3 * var(--spacing)) 0;

			&:has(svg) {
				display: flex;
				flex-direction: column;
				gap: calc(1 * var(--spacing));
				align-items: center;
			}

			svg {
				width: calc(5 * var(--spacing));
				height: calc(5 * var(--spacing));
			}
		}

		&.current {
			border-bottom: 2px solid var(--text-color);
			color: var(--text-color);
			font-weight: 600;

			&:has(svg) {
				font-weight: initial;
			}
		}
	}
}