/**
 * Default block appender.
 *
 * This component shows up in 3 places:
 * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
 * - on the right, inside empty paragraphs
 * - absolute positioned and blue inside nesting containers
 */

.block-editor-default-block-appender {
	clear: both; // The appender doesn't scale well to sit next to floats, so clear them.

	// Default to centered and content-width, like blocks
	margin-left: auto;
	margin-right: auto;
	position: relative;

	&[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
		// Outline on root-level default block appender is redundant with the
		// WritingFlow click redirector.
		outline: 1px solid transparent;
	}

	.block-editor-default-block-appender__content {
		// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
		opacity: 0.62;
	}

	// Dropzone.
	.components-drop-zone__content-icon {
		display: none;
	}
}

// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
// that exists only on empty documents.
.block-editor-default-block-appender .block-editor-inserter,
.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
	position: absolute;
	top: 0;
	right: 0;
	line-height: 0;

	&:disabled {
		display: none;
	}
}


/**
 * Fixed position appender.
 * These styles apply to all in-canvas inserters that exist inside nesting containers.
 */

.block-editor-block-list__block .block-list-appender {
	position: absolute;
	list-style: none;
	padding: 0;
	z-index: z-index(".block-editor-block-list__block .block-list-appender");
	bottom: 0;
	right: 0;

	// These rules needs extra specificity as it's affected by DOM rules.
	&.block-list-appender {
		margin: 0;
		line-height: 0;
	}

	.block-editor-default-block-appender {
		height: $button-size-small;
	}

	// @todo: these are currently two separate components. Since we're now
	// treating them the same, one or both can be retired.
	.block-editor-inserter__toggle.components-button.has-icon,
	.block-list-appender__toggle {
		flex-direction: row;
		box-shadow: none;
		height: $button-size-small;
		width: $button-size-small;

		// Hide by default, then we unhide it when the selected block is a direct ancestor.
		display: none;

		// Important to override styles form Button component.
		padding: 0 !important;

		// Basic look
		background: $gray-900;
		color: $white;

		&:hover {
			color: $white;
			background: var(--gc-admin-theme-color);
		}
	}

	// This content only shows up inside the empty appender.
	.block-editor-default-block-appender__content {
		display: none;
	}

	// These could be avoided by employing a :not(:only-child) on the parent,
	// but this should be more performant.
	// @todo: These styles can almost certainly be refactored away we refactor
	// the markup and classes of the component itself. The rules provide some
	// baseline styles for when the block is the only one inside.
	&:only-child {
		position: relative;
		right: auto;
		align-self: center;
		list-style: none;
		line-height: inherit;

		.block-editor-default-block-appender__content {
			display: block;
		}
	}
}

// Unhide the inserter when you're in the exact container.
.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
.block-editor-block-list__block.is-selected > .block-list-appender {
	.block-editor-inserter__toggle.components-button.has-icon,
	.block-list-appender__toggle {
		display: flex;
	}
}