style.scss

.editor-inserter {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	font-family: $default-font;
	font-size: $default-font-size;
	line-height: $default-line-height;

	@include break-medium {
		position: relative;
	}
}

.editor-inserter__toggle {
	display: inline-flex;
	align-items: center;
	color: $dark-gray-500;
	background: none;
	cursor: pointer;
	border: none;
	outline: none;
	transition: color .2s ease;

	.editor-layout__content & {
		border-radius: $icon-button-size / 2;
	}

	&:hover,
	&:focus {
		color: $blue-medium-500;
	}
}

.editor-inserter__menu {
	box-shadow: $shadow-popover;
	border: 1px solid $light-gray-500;
	position: absolute;
	background: $white;
	z-index: z-index( '.editor-inserter__menu' );

	left: 0;
	right: 0;

	// inserter becomes popup
	@include break-medium {
		width: 280px;
		left: -122px;
		right: auto;
		height: auto;
	}

	&.is-top {
		bottom: 42px;

		.editor-inserter__arrow {
			bottom: -10px;
			left: 50%;
			margin-left: -10px;
			border-top-style: solid;
			border-bottom: none;
			border-left-color: transparent;
			border-right-color: transparent;

			&:before {
				bottom: 2px;
				border: 10px solid $white;
				content: " ";
				position: absolute;
				left: 50%;
				margin-left: -10px;
				border-top-style: solid;
				border-bottom: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
		}
	}

	&.is-bottom {
		top: $admin-bar-height-big + $item-spacing -1px;

		@include break-medium {
			top: $admin-bar-height + $item-spacing;
		}

		.editor-inserter__arrow {
			top: -10px;
			left: 50%;
			margin-left: -10px;
			border-bottom-style: solid;
			border-top: none;
			border-left-color: transparent;
			border-right-color: transparent;

			&:before {
				top: 2px;
				border: 10px solid $light-gray-100;
				content: " ";
				position: absolute;
				left: 50%;
				margin-left: -10px;
				border-bottom-style: solid;
				border-top: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
		}
	}

	&.is-right {
		left: -32px;
		.editor-inserter__arrow {
			left: 49px;
			&:before {
				left: 0;
			}
		}
	}
}

.editor-inserter__arrow {
	border: 10px dashed $light-gray-500;
	height: 0;
	line-height: 0;
	position: absolute;
	width: 0;
	z-index: z-index( '.editor-inserter__arrow' );

	display: none;

	@include break-medium {
		display: block;
	}
}

.editor-inserter__content {
	height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size } );

	@include break-medium {
		height: auto;
		max-height: 50vh;
	}

	overflow: auto;
	box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 );

	&:focus {
		outline: none;
	}
}

input[type=search].editor-inserter__search {
	display: block;
	width: 100%;
	border: none;
	margin: 0;
	box-shadow: none;
	border-top: 1px solid $light-gray-500;
	padding: 8px 16px;
	font-size: 13px;

	&:focus {
		outline: none;
	}
}

.editor-inserter__category-blocks {
	display: flex;
	flex-flow: row wrap;
	padding: 3px;
}

.editor-inserter__block {
	display: flex;
	width: 50%;
	font-size: 12px;
	color: $dark-gray-500;
	margin: 0;
	padding: 8px;
	align-items: center;
	cursor: pointer;
	border: none;
	background: none;
	line-height: 20px;

	&:hover,
	&:focus {
		color: $blue-medium-500;
		outline: none;
		position: relative;
	}

	&:active,
	&.is-active {
		background: $dark-gray-500;
		position: relative;
		color: $white;
	}

	.dashicon {
		margin-right: 8px;
	}
}

.editor-inserter__separator {
	display: block;
	margin: 0;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: $light-gray-100;
	border-bottom: 1px solid $light-gray-500;
}