.sc-button {
    margin-bottom: 0.5rem;
    
    &.bt-submit, &.bt-save, &.bt-create, &.bt-new, &.bt-duplicate, &.bt-not-duplicate {
        @include button($green, $white);
    }

    &.bt-reset, &.bt-delete {
        @include button($red, $white);
    }

    &.bt-action, &.bt-edit, &.bt-update {
        @include button($orange, $white);
    }

    &.bt-show, &.bt-view {
        @include button($blue, $white);
    }

    &:not(.change-icon) {

        // icons using font-awesome "old way"
        &.bt-create::before,
        &.bt-save::before,
        &.bt-new::before,
        &.bt-delete::before,
        &.bt-update::before,
        &.bt-edit::before,
        &.bt-cancel::before,
        &.bt-view::before,
        &.bt-show::before {
            font: normal normal normal 14px/1 FontAwesome;
            margin-right: 0.5em;
        }
        
        // icons using font-awesome "new svg way"
        &.bt-not-duplicate::before,
        &.bt-duplicate::before {
            display: inline-block;
            width: 1em;
            margin-right: 0.5em;
            vertical-align: middle;
        }

        &.bt-save::before {
            // add a floppy
            content: "";
        }

        &.bt-create::before, &.bt-new::before {
            // add a plus
            content: "";
        }

        &.bt-delete::before {
            // add a trash
            content: "";
        }

        &.bt-edit::before, &.bt-update::before {
            // add a pencil
            content: "";
        }

        &.bt-cancel::before {
            // add an arrow left
            content: "";
        }

        &.bt-show::before, &.bt-view::before {
            content: "";
        }
        
        &.bt-duplicate::before {
            content: url("./copy-solid.svg");
        }

        &.bt-not-duplicate::before {
            content: url("./users-slash-solid.svg");
        }
    }

    > i.fa {
        margin-right: 0.5em;
    }

    &.has-hidden,
    &:empty {
        > i.fa {
            margin-right: 0;
        }
        &:not(.change-icon) {
            &.bt-create::before,
            &.bt-save::before,
            &.bt-new::before,
            &.bt-delete::before,
            &.bt-update::before,
            &.bt-edit::before,
            &.bt-cancel::before,
            &.bt-view::before,
            &.bt-show::before {
                margin-right: 0;
            }
        }
    }

    &.has-hidden > span.show-on-hover {
            display: none;
        }

    &.has-hidden:hover {

        > span.show-on-hover {
        display: inline-block;
        }

        > i.fa {
            margin-right: 0.5em;
        }

        &:not(.change-icon) {
            &.bt-create::before,
            &.bt-save::before,
            &.bt-new::before,
            &.bt-delete::before,
            &.bt-update::before,
            &.bt-edit::before,
            &.bt-cancel::before,
            &.bt-view::before,
            &.bt-show::before {
                margin-right: 0.5em;
            }
        }
    }

    &.button-small {
        font-size: 80%;
        padding: 6px 8px;
    }
}



// Sticky form buttons
.sticky-form-buttons {
    margin-top:1em;
    background-color:$chill-beige;
    position:sticky;
    bottom:0.5em;
    text-align:center;
    padding:0.5em;
    border-radius: $base-border-radius;


}



.sticky-form-buttons .margin-5 {
    margin-left: 5%;
    margin-right: 5%;
}

.sticky-form-buttons .margin-10 {
    margin-left: 10%;
    margin-right: 10%;
}