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

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

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

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

		> a, > .inner {
			display: block;
			padding: var(--spacing-3) 0;
			border-radius: var(--rounded-lg);

			&:has(svg) {
				display: flex;
				flex-direction: column;
				gap: 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) {
		li {
			> a, > .inner {
				padding: var(--spacing-2) 0;
			}
		}

		&:not(.--floating) {
			> ul {
				background-color: white;
				padding: 0;
				border-radius: 0;
			}

			li {
				color: var(--text-color-secondary);
				text-transform: uppercase;

				&:has(svg) {
					text-transform: initial;
				}

				> a, > .inner {
					border-radius: 0;

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