.wp-block-buttons {
	.wp-block-button {
		transition: all 0.3s ease-in-out;

		&:not(.is-style-outline) {
			.wp-block-button__link {
				display: inline-flex;
				align-items: center;
				position: relative;
				padding: 12px 20px;
				color: #FFFFFF;
				background-color: #272725;
				border-radius: 8px;
				transition: all 0.3s ease-in-out;
				border: 0 !important;
				font-weight: 500;

				&:hover {
					background-color: #686864;
					color: #FFFFFF;
					border: 0 !important;
				}

				&:focus,
				&:active &:focus-visible {
					outline: none;
					color: #FFFFFF;
					background-color: #590512;
					border: 0 !important;
				}

			}
		}

		&.is-style-outline {
			.wp-block-button__link {
				display: inline-flex;
				align-items: center;
				position: relative;
				padding: 0;
				color: #272725;
				background-color: transparent;
				border-radius: 0;
				transition: all 250ms ease-in-out;
				border: 0 !important;
				box-shadow: none;
				font-weight: 500;
				padding: 12px 0px;

				&::after {
					content: '';
					display: inline-block;
					width: 24px;
					height: 24px;
					margin-left: 8px;
					background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_4028_297)"><path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="%23272725"/></g><defs><clipPath id="clip0_4028_297"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>');
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					transition: all 250ms ease;
				}

				&:hover {
					color: #C1242A;
					box-shadow: none;
					background-color: transparent;
					border: 0 !important;

					&::after {
						background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_4028_311)"><path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="%23C1242A"/></g><defs><clipPath id="clip0_4028_311"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>');
					}

				}

				&:focus,
				&:active &:focus-visible {
					outline: none;
					color: #272725;
					box-shadow: ;
					background-color: transparent;
					border: 0 !important;
					border-radius: 8px;
					box-shadow: 0 0 0 1px #C1242A;

					&::after {
						background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_4028_297)"><path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="%23272725"/></g><defs><clipPath id="clip0_4028_297"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>');
					}

				}
			}

		}
	}
}