.wp-block-buttons .wp-block-button,
.wp-block-button.wc-block-components-product-button {
	transition: var(--vinnshop-btn-transition);

	/* Default style (no class) - styled as Light */
	&:not(.is-style-outline):not(.is-style-fill):not(.is-style-has-arrow) {
		.wp-block-button__link {
			display: inline-flex;
			align-items: center;
			position: relative;
			background-color: var(--vinnshop-btn-light-bg);
			color: var(--vinnshop-btn-light-color);
			border: none;
			border-radius: var(--vinnshop-btn-radius);
			padding: var(--vinnshop-btn-padding);

			&:hover {
				background-color: var(--vinnshop-btn-light-bg-hover);
				color: var(--vinnshop-btn-light-color);
			}

			&:focus,
			&:focus-visible {
				outline: none;
				background-color: var(--vinnshop-btn-light-bg-focus);
				color: var(--vinnshop-btn-light-color);
				box-shadow: 0 0 0 1px var(--vinnshop-btn-light-focus-ring);
			}

			&:active {
				background-color: var(--vinnshop-btn-light-bg-active);
				color: var(--vinnshop-btn-light-color);
			}

			&:disabled,
			&.disabled {
				background-color: var(--vinnshop-btn-disabled-bg);
				color: var(--vinnshop-btn-disabled-color);
				cursor: not-allowed;
			}
		}

		@media all and (max-width: 768px) {
			.wp-block-button__link {
				padding: var(--vinnshop-btn-padding-mobile);
			}
		}
	}

	/* Fill style - Light (replaces default Fill) */
	&.is-style-fill {
		.wp-block-button__link {
			display: inline-flex;
			align-items: center;
			position: relative;
			background-color: var(--vinnshop-btn-light-bg);
			color: var(--vinnshop-btn-light-color);
			border: none;
			border-radius: var(--vinnshop-btn-radius);

			&:hover {
				background-color: var(--vinnshop-btn-light-bg-hover);
				color: var(--vinnshop-btn-light-color);
			}

			&:focus,
			&:focus-visible {
				outline: none;
				background-color: var(--vinnshop-btn-light-bg-focus);
				color: var(--vinnshop-btn-light-color);
				box-shadow: 0 0 0 1px var(--vinnshop-btn-light-focus-ring);
			}

			&:active {
				background-color: var(--vinnshop-btn-light-bg-active);
				color: var(--vinnshop-btn-light-color);
			}

			&:disabled,
			&.disabled {
				background-color: var(--vinnshop-btn-disabled-bg);
				color: var(--vinnshop-btn-disabled-color);
				cursor: not-allowed;
			}
		}
	}

	/* Outline style - Dark (replaces default Outline) */
	&.is-style-outline {
		.wp-block-button__link {
			display: inline-flex;
			align-items: center;
			position: relative;
			background-color: var(--vinnshop-btn-dark-bg);
			color: var(--vinnshop-btn-dark-color);
			border: none;
			border-radius: var(--vinnshop-btn-radius);

			&:hover {
				background-color: var(--vinnshop-btn-dark-bg-hover);
				color: var(--vinnshop-btn-dark-color);
			}

			&:focus,
			&:focus-visible {
				outline: none;
				background-color: var(--vinnshop-btn-dark-bg-focus);
				color: var(--vinnshop-btn-dark-color);
				box-shadow: 0 0 0 1px var(--vinnshop-btn-dark-focus-ring);
			}

			&:active {
				background-color: var(--vinnshop-btn-dark-bg-active);
				color: var(--vinnshop-btn-dark-color);
			}

			&:disabled,
			&.disabled {
				background-color: var(--vinnshop-btn-disabled-bg);
				color: var(--vinnshop-btn-disabled-color);
				cursor: not-allowed;
			}

			@media all and (max-width: 768px) {
				padding: var(--vinnshop-btn-padding-mobile);
			}
		}
	}

	/* Arrow style */
	&.is-style-has-arrow {
		.wp-block-button__link {
			display: inline-flex;
			align-items: center;
			position: relative;
			background-color: var(--vinnshop-btn-light-bg);
			color: var(--vinnshop-btn-light-color);
			border: none;
			border-radius: var(--vinnshop-btn-radius);
			background-image: var(--vinnshop-btn-arrow-icon);
			background-repeat: no-repeat;
			background-position: calc(100% - 24px) center;
			background-size: 18px 18px;
			padding: var(--vinnshop-btn-arrow-padding) !important;

			&:hover {
				background-color: var(--vinnshop-btn-light-bg-hover);
				color: var(--vinnshop-btn-light-color);
			}

			&:focus,
			&:focus-visible {
				outline: none;
				background-color: var(--vinnshop-btn-light-bg-focus);
				color: var(--vinnshop-btn-light-color);
				box-shadow: 0 0 0 1px var(--vinnshop-btn-light-focus-ring);
			}

			&:active {
				background-color: var(--vinnshop-btn-light-bg-active);
				color: var(--vinnshop-btn-light-color);
			}

			&:disabled,
			&.disabled {
				background-color: var(--vinnshop-btn-disabled-bg);
				color: var(--vinnshop-btn-disabled-color);
				cursor: not-allowed;
			}
		}

		@media all and (max-width: 768px) {
			.wp-block-button__link {
				padding: var(--vinnshop-btn-arrow-padding-mobile) !important;
			}
		}
	}
}