.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}

/* Icon Inline */
.wp-element-button img {
    height: 16px;
    margin: 0 8px;
    vertical-align: middle;
}

/* Primary Button */
.is-style-fill .wp-element-button {
	background-color: var(--wp--preset--color--custom-action-primary);
	color: var(--wp--preset--color--custom-text-inverted);
	border-radius: 32px;
    padding: 8px 12px;
}

.is-style-fill .wp-element-button:hover {
	background-color: var(--wp--preset--color--custom-action-hover);
}

.is-style-fill .wp-element-button:active {
	background-color: var(--wp--preset--color--custom-action-active);
    text-decoration: underline;
}

/* Secondary Button */
.is-style-outline .wp-element-button {
	background-color: var(--wp--preset--color--custom-bg-white);
	color: var(--wp--preset--color--custom-text-action);
    border: 1px solid var(--wp--preset--color--custom-stroke-default);
	border-radius: 32px;
    padding: 8px 12px;
}

.is-style-outline .wp-element-button:hover {
	background-color: var(--wp--preset--color--custom-bg-white);
	color: var(--wp--preset--color--custom-action-hover);
    border: 1px solid var(--wp--preset--color--custom-action-hover);
}

.is-style-outline .wp-element-button:active {
	background-color: var(--wp--preset--color--custom-bg-white);
	color: var(--wp--preset--color--custom-action-active);
    border: 1px solid var(--wp--preset--color--custom-action-active);
    text-decoration: underline;
}

/* Tertiary Button */
.is-style-button-tertiary .wp-element-button {
	background-color: var(--wp--preset--color--custom-bg-primary);
	color: var(--wp--preset--color--custom-text-action);
	border-radius: 32px;
    padding: 8px 12px;
}

.is-style-button-tertiary .wp-element-button:hover {
	background-color: var(--wp--preset--color--custom-bg-hover);
	color: var(--wp--preset--color--custom-action-hover);
}

.is-style-button-tertiary .wp-element-button:active {
	background-color: var(--wp--preset--color--custom-bg-hover);
	color: var(--wp--preset--color--custom-action-active);
    text-decoration: underline;
}

/* Ghost Button */
.is-style-button-ghost .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--custom-text-secondary);
    padding: 8px 12px;
}

.is-style-button-ghost .wp-element-button:hover {
	background-color: var(--wp--preset--color--custom-bg-hover);
	color: var(--wp--preset--color--custom-action-hover);
}

.is-style-button-ghost .wp-element-button:active {
	background-color: var(--wp--preset--color--custom-bg-primary);
	color: var(--wp--preset--color--custom-action-active);
    text-decoration: underline;
}
/* Link Button */
.is-style-button-link .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--custom-action-primary);
	border-radius: 32px;
    padding: 8px 0;
}

.is-style-button-link .wp-element-button:hover {
	color: var(--wp--preset--color--custom-action-hover);
}

.is-style-button-link .wp-element-button:active {
	color: var(--wp--preset--color--custom-action-active);
    text-decoration: underline;
}