/**
 * Button Block Style
 *
 * @package WordPress
 * @since BCCG 1.0
 * 
*/

.wp-block-button.is-style-secondary-btn .wp-block-button__link {
    background-color: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-secondary-btn .wp-block-button__link:focus,
.wp-block-button.is-style-secondary-btn .wp-block-button__link:active,
.wp-block-button.is-style-secondary-btn .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--darker-secondary);
    border-color: var(--wp--preset--color--darker-secondary);
}

.wp-block-button.is-style-primary-btn .wp-block-button__link,
.wp-block-button.is-style-secondary-btn .wp-block-button__link,
.wp-block-button.is-style-primary-outline-btn .wp-block-button__link,
.wp-block-button.is-style-secondary-outline-btn .wp-block-button__link {
    letter-spacing: 3px;
}

.wp-block-button.is-style-secondary-outline-nav-btn .wp-block-button__link,
.wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link {
    letter-spacing: 1px;
    font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link::before {
    content: "";
    background-image: url(../../images/spritesheet.png);
    background-repeat: no-repeat;
    background-position: -72px 0;
    height: 20px;
    width: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--wp--preset--spacing--10);
    line-height: 1;
    filter: unset;
    transition: var(--trn-ease);
}

.wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link:hover::before {
    filter: brightness(0) invert(1);
}

.wp-block-button.is-style-secondary-outline-btn .wp-block-button__link,
.wp-block-button.is-style-secondary-outline-nav-btn .wp-block-button__link,
.wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link {
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-secondary-outline-btn .wp-block-button__link:focus,
.wp-block-button.is-style-secondary-outline-btn .wp-block-button__link:active,
.wp-block-button.is-style-secondary-outline-btn .wp-block-button__link:hover,
.wp-block-button.is-style-secondary-outline-nav-btn .wp-block-button__link:focus,
.wp-block-button.is-style-secondary-outline-nav-btn .wp-block-button__link:active,
.wp-block-button.is-style-secondary-outline-nav-btn .wp-block-button__link:hover,
.wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link:focus,
.wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link:active,
.wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--darker-secondary);
    border-color: var(--wp--preset--color--darker-secondary);
    color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-primary-btn .wp-block-button__link {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-primary-btn .wp-block-button__link:focus,
.wp-block-button.is-style-primary-btn .wp-block-button__link:active,
.wp-block-button.is-style-primary-btn .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--darker-primary);
    border-color: var(--wp--preset--color--darker-primary);
}

.wp-block-button.is-style-primary-outline-btn .wp-block-button__link {
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-primary-outline-btn .wp-block-button__link:focus,
.wp-block-button.is-style-primary-outline-btn .wp-block-button__link:active,
.wp-block-button.is-style-primary-outline-btn .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--darker-primary);
    border-color: var(--wp--preset--color--darker-primary);
    color: var(--wp--preset--color--white);
}

@media only screen and (max-width: 1366px) {

    .wp-block-button.is-style-secondary-outline-nav-btn .wp-block-button__link,
    .wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link {
        letter-spacing: 0;
        font-size: var(--wp--preset--font-size--tiny);
        height: 42px;
        display: flex;
        align-items: center;
        padding: .6em 1em;
    }

    .wp-block-button.is-style-secondary-outline-nav-phone-btn .wp-block-button__link::before {
        transform: scale(.8);
    }
}