.components-accessible-toolbar {
	display: inline-flex;
	border: $border-width solid $gray-900;
	border-radius: $radius-block-ui;
	flex-shrink: 0;

	& > .components-toolbar-group:last-child {
		border-right: none;
	}
}

.components-accessible-toolbar,
.components-toolbar {
	.components-button {
		position: relative;
		height: $block-toolbar-height;
		z-index: 1;

		// Give all buttons extra padding to fit text.
		padding-left: $grid-unit-20;
		padding-right: $grid-unit-20;

		// Don't show the focus inherited by the Button component.
		&:focus:enabled {
			box-shadow: none;
			outline: none;
		}

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

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

			// Animate in.
			animation: components-button__appear-animation 0.1s ease;
			animation-fill-mode: forwards;
			@include reduce-motion("animation");
		}

		svg {
			position: relative;

			// Center the icon inside.
			margin-left: auto;
			margin-right: auto;
		}

		// Toggled style.
		&.is-pressed {
			background: transparent;

			&:hover {
				background: transparent;
			}

			&::before {
				background: $gray-900;
			}
		}

		// Focus style.
		&:focus::before {
			@include block-toolbar-button-style__focus();
		}

		// Ensure the icon buttons remain square.
		// This needs specificity.
		&.has-icon.has-icon {
			// Reduce the default padding when a button only has an icon.
			padding-left: $grid-unit-15;
			padding-right: $grid-unit-15;
			min-width: $block-toolbar-height;
		}

		// @todo: We should extract the tabs styles to the tabs component itself
		&.components-tab-button {
			font-weight: 500;

			span {
				display: inline-block;
				padding-left: 0;
				padding-right: 0;
				position: relative;
			}
		}
	}
}


@keyframes components-button__appear-animation {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}