@import '../utilities/mixins';


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


/// Set checkbox color.
/// 
/// @author Federico Gambardella<fedega86@libero.it>
/// @param $name
/// @param $map
@mixin checkbox-color($name, $map) {
    .fk-checkbox-#{$name} {
        
        .fk-custom-checkbox {
            background-color: map-get($map, bg-#{$name});
            border: map-get($map, border-#{$name});

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

        .checked {
            background-color:map-get($map, checked-#{$name}) !important;
            border-color: map-get($map, checked-#{$name}) !important;
        }

        .native-input {

            &:focus + .fk-custom-checkbox {
                -webkit-box-shadow: 0 0 0 0.375rem map-get($map, shadow-#{$name});
                box-shadow: 0 0 0 0.375rem map-get($map, shadow-#{$name});
            }

            &:disabled + .fk-custom-checkbox {
                background-color: map-get($map, disabled-bc-#{$name})!important;
                border-color: map-get($map, disabled-bc-#{$name})!important;
            }

        }

        .fk-checkbox-icon {
            color: map-get($map, icon-#{$name}) ;
        }

        .fk-text{
            color: map-get($map, text-color-#{$name})
        }

        .disabled {
            color: map-get($map, disabled-text-#{$name})!important;
        }

        .label {
            color: map-get($map, label-#{$name})!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);
            }
        }
       
      
    }

      
}