.wp-block-buttons {
	.wp-block-button {
		transition: all 250ms ease-in-out;

		&:not(.is-style-outline) {
			.wp-block-button__link {
				display: inline-flex;
				align-items: center;
				position: relative;
				padding: 8px 20px;
				color: #FFFFFF;
				background-color: var(--wp--preset--color--custom-black-light);
				border-radius: 8px;
				transition: all ease 0.3s;
				border: 0 !important;
				font-weight: 400;
				box-shadow: 0 0 0 2px var(--wp--preset--color--custom-black-light);

				&:hover {
					background-color: var(--wp--preset--color--base);
					color: var(--wp--preset--color--custom-phase-1);
					box-shadow: 0 0 0 2px var(--wp--preset--color--base);
					border: 0 !important;
				}

				&:focus,
				&:active &:focus-visible {
					outline: none;
					background-color: var(--wp--preset--color--base);
					color: var(--wp--preset--color--custom-phase-1);
					box-shadow: 0 0 0 2px var(--wp--preset--color--custom-phase-1);
					border: 0 !important;
				}

			}
		}

		&.is-style-outline {
			.wp-block-button__link {
				display: inline-flex;
				align-items: center;
				position: relative;
				padding: 8px 20px;
				color: var(--wp--preset--color--base);
				background-color: var(--wp--preset--color--main);
				border-radius: 8px;
				transition: all 250ms ease-in-out;
				border: 0 !important;
				box-shadow: 0 0 0 2px #3d3d3d;
				font-weight: 400;


				&:hover {
					color: var(--wp--preset--color--base);
					box-shadow: 0 0 0 2px var(--wp--preset--color--base);
					background-color: var(--wp--preset--color--custom-phase-1);
					border: 0 !important;
				}

				&:focus,
				&:active &:focus-visible {
					outline: none;
					background-color: var(--wp--preset--color--base);
					color: var(--wp--preset--color--custom-phase-1);
					box-shadow: 0 0 0 2px var(--wp--preset--color--custom-phase-1);
					border: 0 !important;

				}
			}

		}
	}
}