.wp-block-buttons {
    width: 100%
}

.wp-block-button,
.wp-block-button__link {
    width: 100%
}

@media all and (min-width: 768px) {
    .wp-block-button {
        width: 274px !important;
    }
}

/* Buttons */
.wp-block-button.has-custom-font-size.has-button-small-font-size .wp-block-button__link {
    font-size: var(--wp--preset--font-size--button-small);
    padding: 8px;
    letter-spacing: 0.04rem;
}

.wp-block-button.has-custom-font-size.has-button-large-font-size .wp-block-button__link {
    font-size: var(--wp--preset--font-size--button-large);
    padding: 16px 8px;
    letter-spacing: 0.02rem;
}

/* Button styles for buttons that aren't wp-block-button */
.button-base {
    line-height: 1.6;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: .2s ease all;
    text-align: center;
    font-family: var(--wp--preset--font-family--primary);
    cursor: pointer;
}

.button-default {
    font-size: 16px;
    padding: 12px 8px;
    letter-spacing: 0.04em;
}

.button-small {
    font-size: 14px;
    padding: 8px;
    letter-spacing: 0.04em;
}

.button-large {
    font-size: 20px;
    padding: 16px 8px;
    letter-spacing: 0.02em;
}

.button-primary {
    background-color: var(--wp--preset--color--so-electric-green);
    border-radius: 4px;
    color: var(--wp--preset--color--so-gray);
}

.button-primary:hover {
    background-color: var(--wp--preset--color--so-electric-green-30);
    text-decoration: none;
}

.button-secondary {
    background-color: var(--wp--preset--color--so-blue);
    border-radius: 4px;
    color: var(--wp--preset--color--white) !important;
    text-decoration: none !important;
    display: block;
}

.button-secondary:hover {
    background-color: var(--wp--preset--color--so-blue-30);
    color: var(--wp--preset--color--white) !important;
    text-decoration: none;
}

.button-secondary-dark {
    background-color: var(--wp--preset--color--so-blue-30);
    border-radius: 4px;
    color: var(--wp--preset--color--so-blue) !important;
}

.button-secondary-dark:hover {
    background-color: var(--wp--preset--color--so-blue-20);
    color: var(--wp--preset--color--so-blue) !important;
    text-decoration: none;
}

.button-tertiary {
    background-color: var(--wp--preset--color--so-blue-10);
    border-radius: 4px;
    color: var(--wp--preset--color--so-blue) !important;
}

.button-tertiary:hover {
    background-color: var(--wp--preset--color--so-blue-5);
    color: var(--wp--preset--color--so-blue) !important;
    text-decoration: none;
}

.button-tertiary-ghost {
    background-color: var(--wp--preset--color--white);
    border-radius: 4px;
    border: 1px solid var(--wp--preset--color--so-blue);
    color: var(--wp--preset--color--so-blue) !important;
}

.button-tertiary-ghost:hover {
    background-color: var(--wp--preset--color--so-blue-5);
    color: var(--wp--preset--color--so-blue) !important;
    text-decoration: none;
}

.button-quaternary {
    color: var(--wp--preset--color--so-blue-40) !important;
}

.button-quaternary:hover {
    color: var(--wp--preset--color--so-blue) !important;
    text-decoration: none;
}