button,
.button,
.wp-element-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--theme--font-size--small);
    border-radius: var(--theme--form--border-radius);
    cursor: pointer;
    font-family: var(--theme--font-family--secondary);
    transition: all 0.3s ease;
}

button,
.button,
.wp-element-button {
    color: var(--theme--color--text);
    background: var(--theme--color--primary);
    border: 0;
    padding: 0.575em 1.75em;
}

button:hover,
.button:hover,
.wp-element-button:hover {
    text-decoration: none;
    background-color: var(--theme--color--primary-hover);
}

/* outline */
button[class*='-secondary'],
.wp-element-button--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--theme--color--headline);
    border-color: var(--theme--color--headline);
    background: none;
    padding: calc(0.575em - 1px) calc(1.5em - 1px);
}

button[class*='-secondary']:hover,
.wp-element-button--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    border-color: var(--theme--color--primary-hover);
}

/* has-icon-left, has-icon-right */
.wp-element-button.has-icon-left,
.wp-element-button.has-icon-right {
    position: relative;
}

.wp-element-button.has-icon-left .wp-element-button__label,
.wp-element-button.has-icon-right .wp-element-button__label {
    transition: transform 0.3s ease;
}

.wp-element-button.has-icon-left:hover .wp-element-button__label {
    transform: translate(0.75em, 0);
}

.wp-element-button.has-icon-right:hover .wp-element-button__label {
    transform: translate(-0.75em, 0);
}

.wp-block-button.is-style-outline .wp-element-button.has-icon-left:hover .wp-element-button__label {
    transform: translate(0.5em, 0);
}

.wp-block-button.is-style-outline .wp-element-button.has-icon-right:hover .wp-element-button__label {
    transform: translate(-0.5em, 0);
}

.wp-element-button.has-icon-left i,
.wp-element-button.has-icon-right i {
    position: absolute;
    top: 50%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease;
}

.wp-element-button.has-icon-left i {
    left: calc(2.5em - 0.75em);
    transform: translate(50%, -50%);
}

.wp-element-button.has-icon-right i {
    right: calc(2.5em - 0.75em);
    transform: translate(-50%, -50%);
}

.wp-element-button--outline.has-icon-left i {
    left: calc(1.5em - 0.5em - 2px);
}

.wp-element-button--outline.has-icon-right i {
    right: calc(1.5em - 0.5em - 2px);
}

.wp-element-button.has-icon-left:hover i,
.wp-element-button.has-icon-right:hover i {
    opacity: 1;
    transform: translate(0, -50%);
}