/*
 2. Button  css  style here
 ------------------------- */

@mixin button-bg($bg) {
    background: $bg;
    
    &:hover {
        background: darken($bg, 8%);
        transition: all 0.3s ease;
        color: #fff;
    }
    &:active {
        background: darken($bg, 0%);
        color: #fff;
    }
    &:focus {
        background: darken($bg, 0%);
        color: #fff;
    }
}

.btn-outline {
    border: 2px solid $theme-color;
    padding-right: 25px;
    padding-left: 25px;
    @include border-radius(0px);
    letter-spacing: 1.5px;
    background: transparent;
    @include transition(all 0.5s ease-in-out 0s);
    &:hover {
        background: $theme-color;
        color: $white-color;
    }
}
.btn-outline-white {
    border: 2px solid $white-color;
    padding-right: 25px;
    padding-left: 25px;
    @include border-radius(0px);
    letter-spacing: 1.5px;
    background: transparent;
    @include transition(all 0.5s ease-in-out 0s);
    color: $white-color;
    &:hover {
      
        background: $white-color;
        color: $black-color;

    }
}
.btn-outline-white-round {
    border: 2px solid $white-color;
    padding-right: 25px;
    padding-left: 25px;
    @include border-radius(35px);

    letter-spacing: 1.5px;
    background: transparent;
    @include transition(all 0.5s ease-in-out 0s);
    color: $white-color;
    &:hover {
      
        background: $white-color;
        color: $black-color;

    }

}


.btn-theme {
    background: $theme-color;
    color: $white-color;
    position: relative;
    @include border-radius(0px);

    &:focus {
        color: $white-color;
        outline: none;
    }
    &:hover {
        color: $white-color;
        background-color: darken($theme-color, 10%);

        &:before {
            width: 100%;
            height: 100%;
        }
        &:after {
            width: 100%;
            height: 100%;
        }
    }
    &:before {
        width: 25px;
        height: 25px;
        border-top: 1px solid $theme-color;
        border-left: 1px solid $theme-color;
        position: absolute;
        top: -4px;
        left: -4px;
        z-index: 99;
        content: "";
        @include transition(all 0.4s ease-in-out 0s);
    }
    &:after {
        width: 25px;
        height: 25px;
        border-right: 1px solid $theme-color;
        border-bottom: 1px solid $theme-color;
        position: absolute;
        right: -4px;
        bottom: -4px;
        z-index: 99;
        content: "";
        @include transition(all 0.4s ease-in-out 0s);
    }
}


.btn-theme-white {
    background: $white-color;
    color: $black-color;
    position: relative;
    @include border-radius(0px);

    &:focus {
        color: $black-color;
        outline: none;
    }
    &:hover {
        color: $black-color;
        background: darken($white-color, 10%);
        &:before {
            width: 100%;
            height: 100%;
        }
        &:after {
            width: 100%;
            height: 100%;
        }
    }
    &:before {
        width: 25px;
        height: 25px;
        border-top: 1px solid $white-color;
        border-left: 1px solid $white-color;
        position: absolute;
        top: -4px;
        left: -4px;
        z-index: 99;
        content: "";
        @include transition(all 0.4s ease-in-out 0s);
    }
    &:after {
        width: 25px;
        height: 25px;
        border-right: 1px solid $white-color;
        border-bottom: 1px solid $white-color;
        position: absolute;
        right: -4px;
        bottom: -4px;
        z-index: 99;
        content: "";
        @include transition(all 0.4s ease-in-out 0s);
    }
}


.btn-white-normal {
    background: $white-color;
    color: $black-color;
    position: relative;
    @include border-radius(0px);

    &:focus {
        color: $black-color;
        outline: none;
    }
    &:hover {
        color: $black-color;
        background: darken($white-color, 10%);
        
    }
    
}