style.scss

.components-button {
	display: inline-flex;
	text-decoration: none;
	font-family: inherit;
	font-weight: normal;
	font-size: $default-font-size;
	margin: 0;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	background: none;
	transition: box-shadow 0.1s linear;
	@include reduce-motion("transition");
	height: $button-size;
	align-items: center;
	box-sizing: border-box;
	padding: 6px 12px;
	border-radius: $radius-block-ui;
	color: $gray-900;

	&[aria-expanded="true"],
	&:hover {
		color: var(--wp-admin-theme-color);
	}

	// Unset some hovers, instead of adding :not specificity.
	&[aria-disabled="true"]:hover {
		color: initial;
	}

	// Focus.
	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
	&:focus:not(:disabled) {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

		// Windows High Contrast mode will show this outline, but not the box-shadow.
		outline: 3px solid transparent;
	}

	/**
	 * Primary button style.
	 */

	&.is-primary {
		white-space: nowrap;
		background: var(--wp-admin-theme-color);
		color: $white;
		text-decoration: none;
		text-shadow: none;

		// Show the boundary of the button, in High Contrast Mode.
		outline: 1px solid transparent;

		&:hover:not(:disabled) {
			background: var(--wp-admin-theme-color-darker-10);
			color: $white;
		}

		&:active:not(:disabled) {
			background: var(--wp-admin-theme-color-darker-20);
			border-color: var(--wp-admin-theme-color-darker-20);
			color: $white;
		}

		&:focus:not(:disabled) {
			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		}

		&:disabled,
		&:disabled:active:enabled,
		&[aria-disabled="true"],
		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
		&[aria-disabled="true"]:active:enabled {
			color: rgba($white, 0.4);
			background: var(--wp-admin-theme-color);
			border-color: var(--wp-admin-theme-color);
			opacity: 1;
			outline: none;

			&:focus:enabled {
				box-shadow:
					0 0 0 $border-width $white,
					0 0 0 3px var(--wp-admin-theme-color);
			}
		}

		&.is-busy,
		&.is-busy:disabled,
		&.is-busy[aria-disabled="true"] {
			color: $white;
			background-size: 100px 100%;
			// Disable reason: This function call looks nicer when each argument is on its own line.
			/* stylelint-disable */
			background-image: linear-gradient(
				-45deg,
				var(--wp-admin-theme-color) 33%,
				var(--wp-admin-theme-color-darker-20) 33%,
				var(--wp-admin-theme-color-darker-20) 70%,
				var(--wp-admin-theme-color) 70%
			);
			/* stylelint-enable */
			border-color: var(--wp-admin-theme-color);
		}
	}

	/**
	 * Secondary and tertiary buttons.
	 */

	&.is-secondary,
	&.is-tertiary {
		// Show the boundary of the button, in High Contrast Mode.
		outline: 1px solid transparent;

		&:active:not(:disabled) {
			background: $gray-300;
			color: var(--wp-admin-theme-color-darker-10);
			box-shadow: none;
		}

		&:hover:not(:disabled) {
			color: var(--wp-admin-theme-color-darker-10);
			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
		}

		&:disabled,
		&[aria-disabled="true"],
		&[aria-disabled="true"]:hover {
			color: lighten($gray-700, 5%);
			background: lighten($gray-300, 5%);
			transform: none;
			opacity: 1;
			box-shadow: none;
			outline: none;
		}
	}

	/**
	 * Secondary button style.
	 */

	&.is-secondary {
		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
		outline: 1px solid transparent; // Shown in high contrast mode.
		white-space: nowrap;
		color: var(--wp-admin-theme-color);
		background: transparent;
	}

	/**
	 * Tertiary buttons.
	 */

	&.is-tertiary {
		white-space: nowrap;
		color: var(--wp-admin-theme-color);
		background: transparent;
		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.

		.dashicon {
			display: inline-block;
			flex: 0 0 auto;
		}

		// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
		p + & {
			margin-left: -($grid-unit-15 * 0.5);
		}
	}

	/**
	 * Destructive buttons.
	 */

	&.is-destructive {
		color: $alert-red;
		box-shadow: inset 0 0 0 $border-width $alert-red;

		&:hover:not(:disabled) {
			color: darken($alert-red, 20%);
			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
		}

		&:focus:not(:disabled) {
			color: var(--wp-admin-theme-color);
		}

		&:active:not(:disabled) {
			background: $gray-400;
		}
	}

	&.is-destructive.is-primary {
		color: #fff;
		background: $alert-red;
		box-shadow: inset 0 0 0 $border-width $alert-red;

		&:hover:not(:disabled) {
			color: #fff;
			background: darken($alert-red, 20%);
			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
		}
	}

	&.is-destructive.is-tertiary {
		box-shadow: none;

		&:hover:not(:disabled) {
			box-shadow: inset 0 0 0 $border-width $alert-red;
			color: $alert-red;
		}

		&:focus:not(:disabled) {
			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
			color: $alert-red;
		}
	}


	/**
	 * Link buttons.
	 */

	&.is-link {
		margin: 0;
		padding: 0;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: none;
		outline: none;
		text-align: left;
		color: var(--wp-admin-theme-color);
		text-decoration: underline;
		transition-property: border, background, color;
		transition-duration: 0.05s;
		transition-timing-function: ease-in-out;
		@include reduce-motion("transition");
		height: auto;

		&:focus {
			border-radius: $radius-block-ui;
		}

		// Link buttons that are red to indicate destructive behavior.
		&.is-destructive {
			color: $alert-red;

			&:active:not(:disabled),
			&:hover:not(:disabled) {
				color: darken($alert-red, 20%);
				background: none;
			}

			&:focus:not(:disabled) {
				color: var(--wp-admin-theme-color);
			}
		}
	}

	&:not([aria-disabled="true"]):active {
		color: inherit;
	}

	&:disabled,
	&[aria-disabled="true"] {
		cursor: default;
		opacity: 0.3;
	}

	&.is-busy,
	&.is-secondary.is-busy,
	&.is-secondary.is-busy:disabled,
	&.is-secondary.is-busy[aria-disabled="true"] {
		animation: components-button__busy-animation 2500ms infinite linear;
		opacity: 1;
		background-size: 100px 100%;
		// Disable reason: This function call looks nicer when each argument is on its own line.
		/* stylelint-disable */
		background-image: linear-gradient(
			-45deg,
			darken($white, 2%) 33%,
			darken($white, 12%) 33%,
			darken($white, 12%) 70%,
			darken($white, 2%) 70%
		);
		/* stylelint-enable */
	}

	&.is-small {
		height: 24px;
		line-height: 22px;
		padding: 0 8px;
		font-size: 11px;

		&.has-icon:not(.has-text) {
			padding: 0 8px;
			width: 24px;
		}
	}

	&.has-icon {
		padding: 6px; // Works for 24px icons. Smaller icons are vertically centered by flex alignments.

		// Icon buttons are square.
		min-width: $button-size;
		justify-content: center;

		.dashicon {
			display: inline-block;
			flex: 0 0 auto;
			margin-left: 2px;
			margin-right: 2px;
		}

		&.has-text {
			justify-content: left;
		}

		&.has-text svg {
			margin-right: 8px;
		}

		&.has-text .dashicon {
			margin-right: 10px;
		}
	}

	// Toggled style.
	&.is-pressed {
		color: $white;
		background: $gray-900;

		&:focus:not(:disabled) {
			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

			// Windows High Contrast mode will show this outline, but not the box-shadow.
			outline: 2px solid transparent;
		}

		&:hover:not(:disabled) {
			color: $white;
			background: $gray-900;
		}
	}

	svg {
		fill: currentColor;
		outline: none;

		// Optimizate for high contrast modes.
		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
		@media (forced-colors: active) {
			fill: CanvasText;
		}
	}

	// Fixes a Safari+VoiceOver bug, where the screen reader text is announced not respecting the source order.
	// See https://core.trac.wordpress.org/ticket/42006 and https://github.com/h5bp/html5-boilerplate/issues/1985
	.components-visually-hidden {
		height: auto;
	}
}

@keyframes components-button__busy-animation {
	0% {
		background-position: 200px 0;
	}
}