@mixin button($color, $background, $border, $border-color) {
    color: $color;
    background-color: $background;

    @if $border != none {
        border: $border $border-color;
    }

}

@mixin button-events($color-hover, $background-hover, $border-color-hover, $background-active) {

    &:hover,
    &:focus {
        color: $color-hover;
        background-color: $background-hover;

        @if $border-color-hover != none {
            border-color: $border-color-hover;
        }

    }

    &:active {
        background-color: $background-active;
    }

}

// btn fluid
@mixin btn--fluid {
    width: 100%;
}

// btn-group fluid
@mixin btn-group--fluid {

    .btn {
        width: 100%;
    }

    .btn-group__item {
        display: block;
    }

}


@if $styles-button == true {

    /*------------------------------------*\
        #BUTTONS-PENGUIN
    \*------------------------------------*/

    .btn {
        line-height: normal;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        cursor: pointer;

        &[disabled] {
            cursor: not-allowed;
            cursor: default;
            pointer-events: none;
        }

        .icon, .fa {
            display: inline-block;
            vertical-align: middle;
        }

    }

    /**
     * btn disabled
     */

    .btn--disabled {
        cursor: not-allowed;
        cursor: default;
        pointer-events: none;
    }


    .btn-group {
        clear: both;
    }

        .btn-group__item {
            display: inline-block;

            &:first-child {

                .btn {
                    margin-left: 0;
                }

            }

            &:last-child {

                .btn {
                    margin-right: 0;
                }

            }

            &:only-child {

                .btn {
                    margin-left: 0;
                    margin-right: 0;
                }

            }

            .btn-group--fluid & {
                display: block;
            }

        }

    @if $styles-button-fluid == true {

        /**
         * btn fluid
         */

        .btn--fluid {
            @include btn--fluid;
        }


        /**
         * btn-group fluid
         */

        .btn-group--fluid {
            @include btn-group--fluid;
        }

    }

}

