@import '../utilities/mixins';

///Theme for component button.
///
///@author Federico Gambardella<fedega86@libero.it>
///@param $section
///@param $map
@mixin component-button($section, $map) {
    @if($section == 'button') {
        @include button-color('basic',$map);
        @include button-color('primary',$map);
        @include button-color('danger',$map);
    }
}

/// Set button color.
/// 
/// @author Federico Gambardella<fedega86@libero.it>
/// @param $name
/// @param $map
@mixin button-color($name, $map) {
    .fk-btn-#{$name} {
        background-color: map-get($map, bg-#{$name});
        border-color: map-get($map, border-color-#{$name});
        color: map-get($map, color-#{$name});
         
        &:focus {
            background-color: map-get($map, focus-#{$name});
            border-color: map-get($map, focus-#{$name});
            outline:0 !important;
            @include box-shadow(map-get($map, box-shadow-#{$name}));
        }

        &:active {
            background-color: map-get($map, active-#{$name});
            border-color: map-get($map, active-#{$name});
            outline:0 !important;
            @include box-shadow(map-get($map, box-shadow-#{$name}));
        }

        &:hover:not(:focus) {
            background-color: map-get($map, hover-#{$name});
            border-color:map-get($map, hover-#{$name});
        }

        &:disabled {
            opacity: 0.7;
            pointer-events: none;
        }
    }

    .fk-btn-#{$name}-active {
        background-color: map-get($map, active-#{$name});
        border-color: map-get($map, active-#{$name});
        outline:0 !important;

        &:hover {
            background-color: map-get($map, active-#{$name}) !important;
            outline:0 !important;
        }
    }
}