/**
 * Button
 */
.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search__button,
.wp-block-button .wp-block-button__link {
	// Extend button style
	@include button-style();
}

.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search .wp-block-search__button,
.wp-block-file .wp-block-file__button {

	&:active {
		color: var(--button--color-text-active);
		background-color: var(--button--color-background-active);
	}

	&:hover {
		color: var(--button--color-text-hover);
		background: transparent;
	}
}

/**
 * Block Options
 */
.wp-block-button {

	// Target the default and filled button states.
	&:not(.is-style-outline) {

		.wp-block-button__link {

			&:active {
				color: var(--button--color-text-active) !important;
				background: transparent !important;
				border-color: var(--button--color-background);
			}

			&:hover {
				color: var(--button--color-text-hover) !important;
				background: transparent !important;
				border-color: var(--button--color-background);
			}

			&:focus {
				color: var(--button--color-text) !important;
				background: var(--button--color-background) !important;
			}
		}
	}

	// Outline Style.
	&.is-style-outline {

		.wp-block-button__link {
			padding: var(--button--padding-vertical) var(--button--padding-horizontal);

			&:not(.has-background) {
				background: transparent;
			}

			&:not(.has-background):not(.has-text-color) {
				background: transparent;
				color: var(--button--color-background);
				border-color: var(--button--color-background);
			}

			&.has-background:not(.has-text-color) {
				color: currentColor;
			}

			&.has-background.has-gray-background-color:not(.has-text-color),
			&.has-background.has-dark-gray-background-color:not(.has-text-color),
			&.has-background.has-black-background-color:not(.has-text-color) {
				color: var(--global--color-white);
			}

			.is-dark-theme & {

				&:not(.has-text-color) {

					&.has-background {
						color: var(--global--color-dark-gray);
					}

					&.has-background.has-gray-background-color,
					&.has-background.has-dark-gray-background-color,
					&.has-background.has-black-background-color {
						color: var(--global--color-white);
					}
				}
			}

			&.has-text-color,
			&.has-background.has-text-color {
				border-color: currentColor;
			}

			&:active,
			&:hover {
				color: var(--button--color-text) !important;
				background: var(--button--color-background) !important;
				border-color: var(--button--color-background);

				&.has-text-color {
					border-color: var(--button--color-background);
				}
			}

			&:focus {
				color: var(--button--color-background) !important;
				background: transparent !important;
			}
		}
	}

	// Squared Style
	.is-style-squared .wp-block-button__link {
		border-radius: 0;
	}
}

.is-style-outline .wp-block-button__link[style*="radius"]:focus,
.wp-block-button a.wp-block-button__link[style*="radius"]:focus {
	outline-offset: 2px;
	outline: 2px dotted var(--button--color-background);
}