@charset "UTF-8";

/* -----------------------------------------------------------------

    Copyright  : 2019
    Created on : 2019-08-15, 4:25 AM
    Author     : Sébastien FOURNIER <contact@sebastien-fournier.com>

    MIXIN BUTTON :
    =============

------------------------------------------------------------------ */

@mixin button($suffix, $config) {

    #content-body .btn.btn-#{$suffix} {

        @if map-has-key($config, 'bg') {
            background-color: map-get($config, "bg");
        }

        @if map-has-key($config, 'border') {
            border-color: map-get($config, "border");
        } @else if map-has-key($config, 'bg') {
            border-color: map-get($config, "bg");
        }

        @if map-has-key($config, 'color-svg') {
            fill: map-get($config, "color-svg") !important;
            * {
                fill: map-get($config, "color-svg") !important;
            }
        } @else if map-has-key($config, 'color') {
            fill: map-get($config, "color") !important;
            * {
                fill: map-get($config, "color") !important;
            }
        }

        @if map-has-key($config, 'color') {
            color: map-get($config, "color");
            * {
                color: map-get($config, "color") !important;
            }
        }

        &:hover,
        &:focus,
        &:active,
        &.active {

            @if map-has-key($config, 'bg-hover') {
                background-color: map-get($config, "bg-hover");
            }

            @if map-has-key($config, 'color-svg-hover') {
                fill: map-get($config, "color-svg-hover") !important;
                * {
                    fill: map-get($config, "color-svg-hover") !important;
                }
            } @else if map-has-key($config, 'color-hover') {
                fill: map-get($config, "color-hover") !important;
                * {
                    fill: map-get($config, "color-hover") !important;
                }
            }

            @if map-has-key($config, 'color-hover') {
                color: map-get($config, "color-hover") !important;
                * {
                    color: map-get($config, "color-hover") !important;
                }
            }
        }

        @if map-has-key($config, 'bg-hover') {
            @include mediaQuery(min-lg) {
                &:before {
                    background-color: map-get($config, "bg-hover");
                }
            }
        }
    }

    #content-body .btn.btn-outline-#{$suffix} {

        @if map-has-key($config, 'bg-outline') {
            background-color: map-get($config, "bg-outline");
        } @else if map-has-key($config, 'color') {
            background-color: transparent;
        }

        @if map-has-key($config, 'border-outline') {
            border-color: map-get($config, "border-outline");
        } @else if map-has-key($config, 'bg') {
            border-color: map-get($config, "bg");
        }

        @if map-has-key($config, 'color-outline-svg') {
            fill: map-get($config, "color-outline-svg") !important;
            * {
                fill: map-get($config, "color-outline-svg") !important;
            }
        } @else if map-has-key($config, 'color-outline') {
            fill: map-get($config, "color-outline") !important;
            * {
                fill: map-get($config, "color-outline") !important;
            }
        } @else if map-has-key($config, 'bg') {
            fill: map-get($config, "bg") !important;
            * {
                fill: map-get($config, "bg") !important;
            }
        }

        @if map-has-key($config, 'color-outline') {
            color: map-get($config, "color-outline");
            * {
                color: map-get($config, "color-outline");
            }
        } @else if map-has-key($config, 'bg') {
            color: map-get($config, "bg");
            * {
                color: map-get($config, "bg");
            }
        }

        &:hover,
        &:focus,
        &:active,
        &.active {

            @if map-has-key($config, 'color-outline-hover') {

                color: map-get($config, "color-outline-hover") !important;
                fill: map-get($config, "color-outline-hover") !important;

                * {
                    color: map-get($config, "color-outline-hover") !important;
                    fill: map-get($config, "color-outline-hover") !important;
                }
            }

            @if map-has-key($config, 'bg-outline-hover') {

                @include mediaQuery(min-lg) {
                    &::before {
                        background-color: map-get($config, "bg-outline-hover") !important;
                    }
                }

                @include mediaQuery(max-lg) {

                    @if map-has-key($config, 'bg') {

                        color: map-get($config, "bg") !important;
                        fill: map-get($config, "bg") !important;

                        * {
                            color: map-get($config, "bg") !important;
                            fill: map-get($config, "bg") !important;
                        }
                    }
                }
            }
        }
    }
}