button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-search__button {
	@include btn;
	@include btn-s;
}

input[type="button"]:not(.wp-block-navigation__responsive-container-open),
input[type="submit"] {
	@include btn-primary;
}

.wp-block-button {

	.wp-block-button__link {
		@include btn;
		@include btn-m;
		@include btn-primary;
		border: 1px solid transparent;
		box-sizing: border-box;
		text-decoration: none;
		outline: none;
		height: auto;
		box-shadow: none;
		border-radius: 0;

		&:not(.has-background) {
			background-color: var(--wp--preset--color--primary);
		}
	}
}

// Special / Additional button styles
.wp-block-tag-cloud.is-style-btn a,
.wp-block-categories.is-style-btn a {
	@include btn;
	@include btn-outline;
	text-decoration: none;
}

.wp-block-tag-cloud.is-style-btn.btn-light a,
.wp-block-categories.is-style-btn.btn-light a {
	@include btn-outline-light;
}

.stretch {
	width: 100% !important;

	.wp-block-ainoblocks-multiple-buttons__inner,
	.wp-block-ainoblocks-button__link {
		width: 100% !important;
	}
}

.wp-block-tag-cloud.is-style-btn a,
.wp-block-categories.is-style-btn a {
	@include btn-xs;
}

.wp-block-search__button {
	min-width: auto;
}

// Classed to set all default buttons to rounded or round.
.btn-rounded {

	.btn,
	input[type="submit"],
	button[type="submit"],
	.edit,
	.woocommerce-button,
	.wc-block-components-button,
	.form-submit.wp-block-button input,
	.woocommerce-MyAccount-navigation li a,
	.tag-cloud-link,
	li a {
		border-radius: var(--global--border-radius-xxs);
	}
}

.btn-round {

	.btn,
	.edit,
	input[type="submit"],
	button[type="submit"],
	.woocommerce-button,
	.search-header .search-field,
	.wc-block-components-button,
	.form-submit.wp-block-button input,
	.woocommerce-MyAccount-navigation li a,
	.tag-cloud-link,
	li a {
		border-radius: var(--global--border-radius-round);
	}
}

// Primary / Filled Buttons
.wp-block-button,
.wp-block-ainoblocks-button {
	transition: all 0.2s ease-out;
}

.wp-block-button,
.wp-block-ainoblocks-button.is-style-primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--button-color-primary);
	fill: var(--wp--preset--color--button-color-primary);

	&:hover {
		background-color: var(--wp--preset--color--secondary) !important;
		color: var(--wp--preset--color--button-color-primary) !important;
		fill: var(--wp--preset--color--button-color-primary) !important;
	}

	&[class*=" has-variant-"] {

		&:hover {
			background-color: var(--wp--preset--color--variant-secondary) !important;
			color: var(--wp--preset--color--variant-button-color-primary) !important;
			fill: var(--wp--preset--color--variant-button-color-primary) !important;
		}
	}
}

// Outline Buttons
.wp-block-ainoblocks-button.is-style-outline {
	color: var(--wp--preset--color--primary);
	fill: var(--wp--preset--color--primary);

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

	&[class*=" has-variant-"] {
	
		&:hover {
			background-color: var(--wp--preset--color--variant-button-color-secondary) !important;
			border-color: transparent !important;
		}
	}
}

// Ghost / Naked Buttons
.wp-block-ainoblocks-button.is-style-naked {
	color: var(--wp--preset--color--primary);
	fill: var(--wp--preset--color--primary);
	text-decoration: none;

	&:hover {
		color: var(--wp--preset--color--primary) !important;
		background-color: var(--wp--preset--color--button-color-secondary) !important;
	}

	.wp-block-ainoblocks-button__link {
		text-decoration: none;
	}

	&[class*=" has-variant-"] {
	
		&:hover {
			color: var(--wp--preset--color--variant-primary) !important;
			background-color: var(--wp--preset--color--variant-button-color-secondary) !important;
		}
	}
}