@use '../../base/mixins/glass' as glass;
@use '../../base/mixins/typography' as font;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;
@use '../../utilities/list-styles' as *;

.sub-navigation {
	padding-top: var(--padding-slim);
	position: relative;
	z-index: 1;

	&-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--padding-extra-small);
		flex-wrap: wrap;
		flex-grow: 1;

		&-wrapper {
			padding: var(--padding-extra-small) var(--padding-small);
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--padding-small);
			flex-wrap: wrap;
			border-width: 0.1875rem;
			border-style: solid;
			border-radius: var(--radius-large);
			box-shadow: var(--shadow-outline);

			@include glass.bg-glass($dense: true);
			@include glass.border-glass;

			@include break.max-mobile {
				flex-direction: column;
				align-items: start;
			}
		}

		@include break.max-mobile {
			flex-direction: column;
			align-items: start;
		}
	}

	&-root-label {
		min-width: fit-content;

		@include font.get-typography(subhead-small);

		color: var(--ui-headline);
	}

	&-links {
		@extend .list-reset;

		display: flex;
		align-items: center;
		gap: var(--padding-extra-small);

		a.sub-navigation-link {
			padding: var(--padding-extra-small) var(--padding-small);
			border-radius: var(--radius-small);
			text-decoration: none;
			transition:
				color var(--transition-fast),
				background-color var(--transition-fast);

			@include font.get-typography(body-bold);

			color: var(--action);

			&:hover {
				color: var(--action-tertiary);
				background-color: with-opacity(var(--action-secondary), 10);
			}
		}

		.sub-navigation-link-current {
			@include font.get-typography(body-bold);

			color: var(--ui-body);
		}

		@include break.max-tablet {
			display: none;
		}
	}

	&-mobile-dropdown {
		display: none;

		@include break.max-tablet {
			min-width: brandui-col-spacing(2);
			display: block;
			z-index: 99;
		}
	}
}