.components-dropdown-menu__menu {
	width: 100%;
	font-family: $default-font;
	font-size: $default-font-size;
	line-height: $default-line-height;

	.components-dropdown-menu__menu-item,
	.components-menu-item {
		width: 100%;
		padding: 6px;
		outline: none;
		cursor: pointer;
		white-space: nowrap;

		&.has-separator {
			margin-top: 6px;
			position: relative;
			overflow: visible;
		}

		&.has-separator::before {
			display: block;
			content: "";
			box-sizing: content-box;
			background-color: $gray-300;
			position: absolute;
			top: -3px;
			left: 0;
			right: 0;
			height: 1px;
		}

		&.is-active svg {
			// Block UI appearance.
			color: $white;
			background: $gray-900;
			box-shadow: 0 0 0 $border-width $gray-900;
			border-radius: $border-width;
		}

		// Formatting buttons
		> svg {
			border-radius: $radius-block-ui;
			width: $button-size-small;
			height: $button-size-small;
		}

		// If menu items are icon-only, make them stretch only to the icon size.
		&.is-icon-only {
			width: auto;
		}
	}

	.components-menu-item__button,
	.components-menu-item__button.components-button {
		min-height: $button-size;
		height: auto;
		text-align: left;
		padding-left: $grid-unit-10;
		padding-right: $grid-unit-10;
	}

	.components-menu-group {
		padding: $grid-unit-10;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: -$grid-unit-10;
		margin-right: -$grid-unit-10;

		&:first-child {
			margin-top: -$grid-unit-10;
		}

		&:last-child {
			margin-bottom: -$grid-unit-10;
		}
	}

	.components-menu-group + .components-menu-group {
		margin-top: 0;
		border-top: $border-width solid $gray-400;
		padding: $grid-unit-10;

		.is-alternate & {
			border-color: $gray-900;
		}
	}
}