@mixin sff_button(){
    %button{
        appearance: none;
        display: inline-block;
        padding: $bt-padding;
        background: $bt-default-background;
        border-radius: $bt-radius;
        border: $bt-default-border;
        color: $bt-default-color;
        font: inherit;
        cursor: pointer;
        text-decoration: none;
        margin: $bt-margin;
        transition: $bt-transition;
        &:hover{
            background: $bt-default-hover-background;
            color: $bt-default-hover-color;
            border: $bt-default-hover-border;
            text-decoration: none;
        }
        &.prim{
            background: $bt-prim-background;
            color: $bt-prim-color;
            border: $bt-prim-border;
            &:hover{
                background: $bt-prim-hover-background;
                color: $bt-prim-hover-color;
                border: $bt-prim-hover-border;
            }
        }
        &.sec{
            background: $bt-sec-background;
            color: $bt-sec-color;
            border: $bt-sec-border;
            &:hover{
                background: $bt-sec-hover-background;
                color: $bt-sec-hover-color;
                border: $bt-sec-hover-border;
            }
        }
        &.dark{
            background: $bt-dark-background;
            color: $bt-dark-color;
            border: $bt-dark-border;
            &:hover{
                background: $bt-dark-hover-background;
                color: $bt-dark-hover-color;
                border: $bt-dark-hover-border;
            }
        }
        &.transparent{
            background: $bt-transparent-background;
            border: $bt-transparent-border;
            color: $bt-transparent-color;
            &:hover{
                background: $bt-transparent-hover-background;
                border: $bt-transparent-hover-border;
                color: $bt-transparent-hover-color;
            }
        }
        &.inline{
            margin: 0;
        }
        &.large{
            font-size: 1.3rem;
        }
        &.small{
            font-size: 0.8rem;
        }
        &.block{
            display: block;
            text-align: center;
            width: 100%;
            clear: both;
        }
        &.icon{
            &-before,
            &-after{
                position: relative;
                &:before{
                    content: '';
                    display: block;
                    position: absolute;
                    width: 1px;
                    height: 100%;
                    background: currentColor;
                    top: 0px;
                }
                > i,
                > svg{
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            &-after{
                padding-right: 3.3em;
                &:before{
                    right: 2.2em;
                }
                > i,
                > svg{
                    right: 0.4em;
                }
            }
            &-before{
                padding-left: 3.3em;
                &:before{
                    left: 2.2em;
                }
                > i,
                > svg{
                    left: 0.6em;
                }
            }
        }
    }
    .button{
        @extend %button;
    }
}