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

.block-editor-block-mover__move-button-container {
	display: flex;
	padding: 0;
	border: none;
	justify-content: center;

	@include break-small() {
		.block-editor-block-mover:not(.is-horizontal) & {
			flex-direction: column;

			> * {
				height: $block-toolbar-height * 0.5 - $grid-unit-05;
				width: 100%;
				min-width: 0 !important; // overrides default button width.

				// Focus style.
				&::before {
					height: calc(100% - 4px);
				}
			}

			.block-editor-block-mover-button.is-up-button svg {
				top: 3px;
				flex-shrink: 0;
			}

			.block-editor-block-mover-button.is-down-button svg {
				bottom: 3px;
				flex-shrink: 0;
			}
		}

		.block-editor-block-mover.is-horizontal & {
			width: $block-toolbar-height;

			> * {
				width: $block-toolbar-height * 0.5;
				min-width: 0 !important; // overrides default button width.
				overflow: hidden;
			}

			.block-editor-block-mover-button {
				padding-left: 0;
				padding-right: 0;
			}

			.block-editor-block-mover-button.is-up-button svg {
				left: 5px;
			}

			.block-editor-block-mover-button.is-down-button svg {
				right: 5px;
			}
		}
	}
}

.block-editor-block-mover__drag-handle {
	cursor: grab;
	@include break-small() {
		width: $block-toolbar-height * 0.5;
		min-width: 0 !important; // overrides default button width.
		overflow: hidden;

		.block-editor-block-mover &.has-icon.has-icon {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

// Specificity is necessary to override block toolbar button styles.
.components-button.block-editor-block-mover-button {
	// Prevent the SVGs inside the button from overflowing the button.
	overflow: hidden;

	// Focus and toggle pseudo elements.
	&::before {
		content: "";
		position: absolute;
		display: block;
		border-radius: $radius-small;
		height: $grid-unit-40;

		// Position the focus rectangle.
		left: $grid-unit-10;
		right: $grid-unit-10;
		z-index: -1;

		@media not ( prefers-reduced-motion ) {
			// Animate in.
			animation: components-button__appear-animation 0.1s ease;
			animation-fill-mode: forwards;
		}
	}

	// Don't show the focus inherited by the Button component.
	&:focus,
	&:focus:enabled,
	// Override focus styles from the block toolbar
	&:focus::before {
		box-shadow: none;
		outline: none;
	}

	&:focus-visible::before {
		@include block-toolbar-button-style__focus();
	}
}