@use '../variables' as *;

.#{$prefix}navigation-menu-group {
	display: flex;
	flex-direction: column;
	gap: var(--#{$prefix}navigation-menu-group-gap, 0.5rem);
	padding: var(--#{$prefix}navigation-menu-group-padding, 1.25rem);

	&__label {
		font-size: var(--#{$prefix}navigation-menu-group-label-font-size, 0.75rem);
		font-weight: var(--#{$prefix}navigation-menu-group-label-font-weight, 600);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--#{$prefix}navigation-menu-group-label-color, #6c757d);
		padding-block: var(--#{$prefix}navigation-menu-group-label-padding-block, 0.25rem);
		padding-inline: var(--#{$prefix}navigation-menu-group-label-padding-inline, 0);
		margin-bottom: var(--#{$prefix}navigation-menu-group-label-margin-bottom, 0.25rem);
	}

	&__content {
		display: flex;
		flex-direction: column;
		gap: var(--#{$prefix}navigation-menu-group-content-gap, 0.25rem);
	}
}