/* DEFAULTS */
html {
    --sbc-smart-button-desktop-color: var(--black-color);
    --sbc-smart-button-desktop-color-hover: var(--black-color);
    --sbc-smart-button-desktop-padding: 8px 43px;
    --sbc-smart-button-desktop-font-size: 16px;
    --sbc-smart-button-desktop-font-weight: 600;
    --sbc-smart-button-desktop-line-height: 23px;
    --sbc-smart-button-desktop-text-align: center;
    --sbc-smart-button-desktop-font-family: 'roboto';

    --sbc-smart-button-desktop-background: var(--main-event-color);
    --sbc-smart-button-desktop-background-hover: var(--main-event-color-hover);
    --sbc-smart-button-desktop-border-width: 0;
    --sbc-smart-button-desktop-border-color: var(--main-event-color);
    --sbc-smart-button-desktop-border-color-hover: var(--main-event-color-hover);
    --sbc-smart-button-desktop-border-radius: 6px;
    --sbc-smart-button-desktop-placement: center;

    --sbc-smart-button-mobile-color: var(--black-color);
    --sbc-smart-button-mobile-color-hover: var(--black-color);
    --sbc-smart-button-mobile-padding: 5px 20px;
    --sbc-smart-button-mobile-font-size: 16px;
    --sbc-smart-button-mobile-font-weight: 600;
    --sbc-smart-button-mobile-line-height: 23px;
    --sbc-smart-button-mobile-text-align: center;
    --sbc-smart-button-mobile-font-family: 'roboto';

    
    --sbc-smart-button-mobile-background: var(--main-event-color);
    --sbc-smart-button-mobile-background-hover: var(--main-event-color-hover);
    --sbc-smart-button-mobile-border-width: 0;
    --sbc-smart-button-mobile-border-color: var(--main-event-color);
    --sbc-smart-button-mobile-border-color-hover: var(--main-event-color-hover);
    --sbc-smart-button-mobile-border-radius: 6px;
    --sbc-smart-button-mobile-placement: center;
}


/* SBC BUTTON */
.sbc-smart-button-wrapper {
    display: flex;
    justify-content: var(--sbc-smart-button-desktop-placement);
    /* this margin can be deleted if you prefer to have it stick to other blocks */
    margin: 1px;
}
#blank-page a.sbc-smart-button:link,
#blank-page a.sbc-smart-button:visited {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-style: solid;
    color: var(--sbc-smart-button-desktop-color);
    padding: var(--sbc-smart-button-desktop-padding);
    font-size: var(--sbc-smart-button-desktop-font-size);
    font-weight: var(--sbc-smart-button-desktop-font-weight);
    line-height: var(--sbc-smart-button-desktop-line-height);
    text-align: var(--sbc-smart-button-desktop-text-align);
    border-width: var(--sbc-smart-button-desktop-border-width);
    border-radius: var(--sbc-smart-button-desktop-border-radius);
    border-color: var(--sbc-smart-button-desktop-border-color);
    background: var(--sbc-smart-button-desktop-background);
    font-family: var(--sbc-smart-button-desktop-font-family);
}
#blank-page a.sbc-smart-button:hover {
    color: var(--sbc-smart-button-desktop-color-hover);
    background: var(--sbc-smart-button-desktop-background-hover);
    border-color: var(--sbc-smart-button-desktop-border-color-hover);
}
@media screen and (max-width: 1000px) {
    .sbc-smart-button-wrapper {
        justify-content: var(--sbc-smart-button-mobile-placement);
        margin: var(--sbc-smart-button-mobile-margin);
    }
    #blank-page a.sbc-smart-button:link,
    #blank-page a.sbc-smart-button:visited{
        color: var(--sbc-smart-button-mobile-color);
        padding: var(--sbc-smart-button-mobile-padding);
        font-size: var(--sbc-smart-button-mobile-font-size);
        font-weight: var(--sbc-smart-button-mobile-font-weight);
        line-height: var(--sbc-smart-button-mobile-line-height);
        text-align: var(--sbc-smart-button-mobile-text-align);
        border-width: var(--sbc-smart-button-mobile-border-width);
        border-radius: var(--sbc-smart-button-mobile-border-radius);
        border-color: var(--sbc-smart-button-mobile-border-color);
        background: var(--sbc-smart-button-mobile-background);
        font-family: var(--sbc-smart-button-mobile-font-family);
    }
    #blank-page a.sbc-smart-button:hover {
        color: var(--sbc-smart-button-mobile-color-hover);
        background: var(--sbc-smart-button-mobile-background-hover);
        border-color: var(--sbc-smart-button-mobile-border-color-hover);
    }
}

/* SBC LINK */
#blank-page a.sbc-smart-link:link, 
#blank-page a.sbc-smart-link:visited {
    text-decoration: underline;
}
#blank-page a.sbc-smart-link:link,
#blank-page a.sbc-smart-link:visited {
    color: var(--sbc-smart-button-desktop-color);
    padding: var(--sbc-smart-button-desktop-padding);
    font-size: var(--sbc-smart-button-desktop-font-size);
    font-weight: var(--sbc-smart-button-desktop-font-weight);
    line-height: var(--sbc-smart-button-desktop-line-height);
    text-align: var(--sbc-smart-button-desktop-text-align);
    display: block;
}
#blank-page a.sbc-smart-link:hover {
    color: var(--sbc-smart-button-desktop-color-hover);
}
@media screen and (max-width: 600px) {
    #blank-page a.sbc-smart-link:link,
    #blank-page a.sbc-smart-link:visited{
        color: var(--sbc-smart-button-mobile-color);
        padding: var(--sbc-smart-button-mobile-padding);
        font-size: var(--sbc-smart-button-mobile-font-size);
        font-weight: var(--sbc-smart-button-mobile-font-weight);
        line-height: var(--sbc-smart-button-mobile-line-height);
        text-align: var(--sbc-smart-button-mobile-text-align);
    }
    #blank-page a.sbc-smart-link:hover {
        color: var(--sbc-smart-button-mobile-color-hover);
    }
}