.tabs {
	z-index: var(--z-nav);
	width: 100%;

	> ul {
		display: flex;
		background-color: var(--bg-color-dark);
		padding: calc(1 * var(--spacing));
		border-radius: var(--rounded-lg);

		@media (width < 40rem) {
			background-color: white;
			padding: 0;
			border-radius: 0;
		}
	}

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

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

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

			&: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 {
				background-color: white;
				font-weight: 600;
			}
		}

		@media (width < 40rem) {
			color: var(--text-color-secondary);
			text-transform: uppercase;

			> a {
				border-radius: 0;

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