// stylelint-disable declaration-no-important, selector-max-specificity

@mixin es-v2-gutenberg-button-active-state($includeBorder: false) {
	background: linear-gradient(135deg, rgb(255, 255, 255), rgb(255, 255, 255)) var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
	background-color: transparent !important;

	transition: {
		property: color, background, box-shadow;
		timing-function: ease-out;
		duration: 0.3s;
	};

	@if $includeBorder == true {
		box-shadow: inset 0 0 0 1px var(--es-admin-cool-gray-300) !important;
	}
	@else if $includeBorder == matchInput {
		box-shadow: inset 0 0 0 1px var(--es-admin-cool-gray-400) !important;
	}

	&:not(.is-pressed) {
		color: var(--es-admin-cool-gray-600) !important;

		&:hover:not(:focus):not(:focus-visible) {
			background-color: var(--es-admin-gray-50) !important;
			color: var(--es-admin-pure-black) !important;

			@if $includeBorder == true {
				box-shadow: inset 0 0 0 1px var(--es-admin-cool-gray-500) !important;
			}
			@else if $includeBorder == matchInput {
				box-shadow: inset 0 0 0 1px var(--es-admin-cool-gray-600) !important;
			}
		}
	}

	&.is-pressed {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)) var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 0 1px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
		color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;

		&:hover:not(:focus):not(:focus-visible),
		&:hover:not(:disabled):not(:focus):not(:focus-visible) {
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)) var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
			color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
		}
	}

	@supports selector(:focus-visible) {
		&:focus:not(:focus-visible) {
			box-shadow: inset 0 0 0 0 var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
			outline: none !important;

			@if $includeBorder {
				box-shadow: inset 0 0 0 1px var(--es-admin-cool-gray-400) !important;
			}
			@else if $includeBorder == matchInput {
				box-shadow: inset 0 0 0 1px var(--es-admin-cool-gray-500) !important;
			}

			&.is-pressed {
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 0 1px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
			}
		}

		&:focus-visible {
			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
		}
	}

	@supports not selector(:focus-visible) {
		&:focus {
			outline: none !important;
			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important;
		}
	}
}

// stylelint-enable declaration-no-important, selector-max-specificity