@use "@wordpress/base-styles/mixins";
@use "@wordpress/base-styles/variables" as *;

.edit-site-sidebar-navigation-item.components-item {
	color: var(--wpds-color-foreground-interactive-neutral-weak);
	// 6px right padding to align with + button
	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
	border: none;
	min-height: $grid-unit-50;

	&:focus,
	&[aria-current="true"],
	// Bump the specificity above the <Item> component's own `:hover` color.
	&#{&}:hover {
		color: var(--wpds-color-foreground-interactive-neutral-weak-active);
	}

	&[aria-current="true"] {
		background: var(--wpds-color-background-interactive-neutral-weak-active);
		color: var(--wpds-color-foreground-interactive-neutral-weak-active);
		font-weight: var(--wpds-typography-font-weight-emphasis);
	}

	// Make sure the focus style is drawn on top of the current item background.
	&:focus-visible {
		// TODO: remove once the <Item> component has migrated to the WPDS focus color token.
		--wp-components-color-accent: var(--wpds-color-stroke-focus);

		transform: translateZ(0);
	}

	&.with-suffix {
		padding-right: $grid-unit-20;
	}
}

.edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
	cursor: grab;
	padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 0;
}