@import '../utilities/mixins';


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


/// Set button color.
/// 
/// @author Federico Gambardella<fedega86@libero.it>
/// @param $name
/// @param $map
@mixin input-color($name, $map) {
    .fk-input-#{$name} {
        
        background-color: map-get($map, background-color-#{$name});
        font-size: 15px;
        box-shadow: none !important;
        text-align: left;
        font-weight: 600;
        border: map-get($map, border-#{$name});
        outline: 0;

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

        &:active {
            background-color: map-get($map, bg-active);
        }

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

        
        &:disabled {
            background-color: map-get($map, disabled-bg) !important;
            border-color: map-get($map, disabled-bc) !important;
            color: map-get($map, disabled-color) !important;
            cursor: default!important;
            i {
               color: map-get($map, disabled-color) !important;
            }
        }

        &.fk-required { 
            background-color: map-get($map, background-color-#{$name}-required );

            &:hover {
                background-color: map-get($map, bg-hover-#{$name}-required);
            }

            &:focus {
                background-color: map-get($map, bg-focus);
            }
        }

        //For dropdown
        .fk-placeholder {
            color: map-get($map, placeholder) !important;
        }
       
    }

    //For dropdown
    .fk-active-option {
        background-color: map-get($map, option-active-bg);
        color: map-get($map, option-active-color);

        &:hover {
            background-color:map-get($map, option-active-bg)!important;
            color: map-get($map, option-active-color) !important;
        }
    }

    @include placeholder-color( 'fk-input-#{$name}', map-get($map, placeholder));


}