.button {
	--wp-admin-theme-color: var(--jp-black);
	--wp-admin-theme-color-darker-10: var(--jp-black-80);
	--wp-admin-theme-color-darker-20: var(--jp-black-80);
	// 1.51px to avoid subpixel rendering issues on Firefox/Linux
	--wp-admin-border-width-focus: 1.51px;

	border-radius: var(--jp-border-radius);
	justify-content: center;
	font-weight: 600;

	// Icon Button
	&.is-icon-button {
		padding: var(--spacing-base);
		width: calc(var(--spacing-base) * 5);
		height: calc(var(--spacing-base) * 5);

		> svg:first-child {
			margin: 0;
			padding: 0;
		}

		&.small {
			padding: calc(var(--spacing-base) / 2);
			width: calc(var(--spacing-base) * 4);
			min-width: calc(var(--spacing-base) * 4);
			height: calc(var(--spacing-base) * 4);
		}
	}

	// Normal Size & Font
	&.normal:not(.is-icon-button) {
		height: auto;
		font-size: var(--font-body);
		line-height: 24px;
		padding: var(--spacing-base) calc(var(--spacing-base) * 3); // 8px - 24px

		// With icon
		&.icon {
			padding: var(--spacing-base) calc(var(--spacing-base) * 2); // 8px - 16px
		}
	}

	// Small Size & Font
	&.small:not(.is-icon-button) {
		height: auto;
		font-size: var(--font-body-extra-small);
		line-height: 20px;
		padding: calc(var(--spacing-base) / 2) var(--spacing-base); // 4px - 8px

		&.icon > svg:first-child {
			margin-right: calc(var(--spacing-base) / 2); // 4px
		}

		// With Spinner
		> :global(.components-spinner) {
			height: 20px;
		}
	}

	&.regular {
		font-weight: 400;
	}

	// Full Width
	&.full-width {
		min-width: 100%;
	}

	// SPECIFICS
	// PRIMARY AND SECONDARY

	// Primary & Secondary
	&:global(.is-primary),
	&:global(.is-secondary) {
		// Disabled
		&:disabled {
			background: var(--jp-gray);
			color: var(--jp-gray-20);
		}
	}

	// Only Secondary
	&:global(.is-secondary) {
		background: var(--jp-white);
		// 1.51px to avoid subpixel rendering issues on Firefox/Linux
		box-shadow: inset 0 0 0 1.51px var(--jp-black);

		// Hover & Active
		&:active:not(:disabled),
		&:hover:not(:disabled) {
			background: var(--jp-gray-0);
		}
	}

	// SPECIFICS
	// LINK & EXTERNAL LINK

	&:global(.is-link) {
		// Normal & Small Spacing
		&.normal,
		&.small {
			padding: 0;
		}

		// Hover State
		&:hover:not(:disabled) {
			text-decoration-thickness: 3px;
		}

		// Focus State
		&:focus:not(:disabled) {
			text-decoration-line: none;
		}
	}

	// DESTRUCTIVE

	&:global(.is-destructive) {
		// Primary
		&:global(.is-primary) {
			box-shadow: none;

			&:not(:disabled) {
				color: var(--jp-white);
				background: var(--jp-red-50);
				box-shadow: inset 0 0 0 1px var(--jp-red-50);
			}

			&:hover:not(:disabled) {
				background: var(--jp-red-60);
				box-shadow: inset 0 0 0 1px var(--jp-red-60);
			}

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

			&:active:not(:disabled) {
				background: var(--jp-red-50);
			}
		}

		// Secondary
		&:global(.is-secondary) {
			box-shadow: none;

			&:not(:disabled) {
				color: var(--jp-red-50);
				background: var(--jp-white);
				box-shadow: inset 0 0 0 1.5px var(--jp-red-50);
			}

			&:hover:not(:disabled) {
				background: var(--jp-red-0);
				box-shadow: inset 0 0 0 1.5px var(--jp-red-60);
				color: var(--jp-red-60);
			}

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

			&:active:not(:disabled) {
				background: var(--jp-gray-0);
			}
		}

		// Link
		&:global(.is-link) {

			&:not(:disabled) {
				color: var(--jp-red-50);
			}

			&:hover:not(:disabled) {
				color: var(--jp-red-60);
				box-shadow: none;
			}

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

	// LOADING

	&.loading {
		position: relative;

		&:global(.has-icon) {
			justify-content: center;
		}

		> *:not(:global(.components-spinner)) {
			visibility: hidden;
		}

		// Spinner
		> :global(.components-spinner) {
			margin: 0;
			position: absolute;
		}
	}
}

.external-icon {
	margin-left: calc(var(--spacing-base) / 2); // 4px
}
