button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 2px solid;
	border-color: $color__border-button;
	border-radius: 3px;
	background: $color__background-button;
	@include font-size(1.6);
	line-height: 1;
	padding: 16px 50px;
	color: $color__main;
	transition: all .3s ease 0s;
	font-weight: 600;
	position: relative;
	top: -2px;

	&:hover {
		border-color: $color__border-button-hover;
		background: $color__border-button-hover;
		color: $color__white;
	}

	&:active,
	&:focus {
		border-color: $color__border-button-focus;
		color: $color__white;
		background-color: $color__main;
		outline: none;
	}
}
.btn {
	display: inline-block;
	font-weight: 600;
	border-radius: 99px;
	white-space: nowrap;
	text-align: center;
	padding: 9px 30px;
	transition: all .3s ease 0s;
	text-transform: uppercase;
}

.btn-primary {
	color: $color__white;
	background-color: $color__main;
	display: inline-block;
	&:hover,
	&:active,
	&:focus {
		color: $color__main;
		background: $color__main-hover;
	}
}

.wp-block-button__link {
	border: 2px solid;
	border-color: $color__main;
	border-radius: 3px;
	background: $color__main;
	font-size: 16px;
	line-height: 1;
	padding: 16px 50px;
	color: $color__white;
	transition: all .3s ease 0s;
	font-weight: 600;
	position: relative;
	top: -2px;
	&:hover {
		border-color: $color__text-main;
		background: $color__text-main;
		color: $color__white;
		text-decoration: none;
	}
	&.has-pale-pink-background-color {
		border: 2px solid #f78da7;
		&:hover {
			background: #fff;
			color: #f78da7;
		}
	}
	&.has-vivid-red-background-color {
		border: 2px solid #cf2e2e;
		&:hover {
			background: #fff;
			color: #cf2e2e;
		}
	}
	&.has-luminous-vivid-orange-background-color {
		border: 2px solid #ff6900;
		&:hover {
			background: #fff;
			color: #ff6900;
		}
	}
	&.has-luminous-vivid-amber-background-color {
		border: 2px solid #fcb900;
		&:hover {
			background: #fff;
			color: #fcb900;
		}
	}
	&.has-light-green-cyan-background-color {
		border: 2px solid #7bdcb5;
		&:hover {
			background: #fff;
			color: #7bdcb5;
		}
	}
	&.has-vivid-green-cyan-background-color {
		border: 2px solid #00d084;
		&:hover {
			background: #fff;
			color: #00d084;
		}
	}
	&.has-pale-cyan-blue-background-color {
		border: 2px solid #8ed1fc;
		&:hover {
			background: #fff;
			color: #8ed1fc;
		}
	}
	&.has-vivid-cyan-blue-background-color {
		border: 2px solid #0693e3;
		&:hover {
			background: #fff;
			color: #0693e3;
		}
	}
	&.has-very-light-gray-background-color {
		border: 2px solid #eee;
		&:hover {
			background: #fff;
			color: #eee;
		}
	}
	&.has-cyan-bluish-gray-background-color {
		border: 2px solid #abb8c3;
		&:hover {
			background: #fff;
			color: #abb8c3;
		}
	}
	&.has-very-dark-gray-background-color {
		border: 2px solid #313131;
		&:hover {
			background: #fff;
			color: #313131;
		}
	}
}

.is-style-outline .wp-block-button__link {
	background-color: $color__white;
	border: 2px solid $color__main;
	color: $color__main;
	&:hover {
		color: $color__white;
		background-color: $color__main;
	}
}