.sidebar-v2__navigator {
	.components-surface.components-card {
		background-color: var(--color-sidebar-background);
	}
}

.sidebar-v2__navigator-sub-menu.components-card-body {
	// Container cuts off content if we do not add 1px padding.
	padding: 1px;
}

.sidebar-v2__navigator-group-description {
	color: var(--color-sidebar-text-alternative);
	font-size: rem(12px);
	margin-block-end: 16px;
	padding: 0 12px;
}

.sidebar-v2__navigator-sub-menu ul {
	list-style: none;
	margin: 0;
}

.sidebar-v2__navigator-sub-menu li:not(:last-child) .sidebar-v2__menu-item {
	margin-block-end: 2px;
}

.sidebar-v2__navigator-sub-menu-header {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-sidebar-text);
	font-size: rem(16px);
	font-weight: 600;
	justify-content: start;
	margin-block-end: 8px;
}

.sidebar-v2__menu-item.components-item {
	color: var(--color-sidebar-text);
	font-size: rem(13px);
}

.sidebar-v2__navigator-sub-menu .components-navigator-back-button,
.sidebar-v2__menu-item.components-item {
	border-radius: 4px;

	&.is-active {
		background: var(--color-sidebar-menu-selected-background);
		color: var(--color-sidebar-menu-selected-text);
	}

	&:hover {
		background: var(--color-sidebar-menu-hover-background);
		color: var(--color-sidebar-menu-hover-text);
	}

	&:focus {
		box-shadow: none;
	}

	&:focus-visible {
		box-shadow: 0 0 0 1px var(--color-sidebar-text-alternative);
	}
}

.sidebar-v2__navigator-sub-menu .components-navigator-back-button svg {
	color: var(--color-sidebar-text);
}

.sidebar-v2__menu-item,
.sidebar-v2__menu-item.is-active, {
	.sidebar__menu-icon {
		color: var(--color-sidebar-gridicon-fill);
	}
}

.sidebar-v2__external-icon {
	color: var(--color-sidebar-text);
}
