@import '../utilities/mixins';


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


/// Set button color.
/// 
/// @author Federico Gambardella<fedega86@libero.it>
/// @param $name
/// @param $map
@mixin radio-color($name, $map) {
    .fk-radio-#{$name} {
        
        .outer-circle {
            background-color: map-get($map, bg-#{$name});
            border: map-get($map, border-#{$name});
        }
         
        input {
            &:enabled:checked:not(:hover) {
                  
                & ~ .inner-circle {
                   background-color: map-get($map, checked-#{$name});
                }
           
                & ~ .outer-circle { 
                     border-color: map-get($map, checked-#{$name});
                 }

            }

            &:disabled:checked {

                & ~ .inner-circle {
                    background-color: map-get($map, disabled-bg-#{$name})!important;
                }
            }

        }

        label {
            &:not(:hover) input:enabled:checked:active ~ .inner-circle {
               background-color: map-get($map, active-#{$name});;
            }

            &:hover {

               .native-input:enabled {

                   & + .outer-circle{
                       border-color: map-get($map, hover-#{$name});
                   }

                   &:checked ~ .inner-circle {
                       background-color: map-get($map, hover-#{$name})!important;
                   }
               }

            }

            &:active {

                .native-input:enabled {

                    & + .outer-circle{
                        border-color: map-get($map, active-#{$name});
                    }
 
                    &:checked ~ .inner-circle {
                        background-color: map-get($map, active-#{$name})!important;
                    }
                }
            }

            &:focus {

                .native-input:enabled {

                    & + .outer-circle{
                        border-color: map-get($map, focus-#{$name})!important;
                    }
 
                    &:active ~ .inner-circle {
                        background-color: map-get($map, focus-#{$name})!important;
                    }
                }
            }

       }

       .native-input {
           
            &:hover + .outer-circle {
                background-color: map-get($map, hover-bg-#{$name}) ;
            }

            &:focus + .outer-circle {
                @include box-shadow(0 0 0 0.375rem map-get($map, shadow-#{$name}));
             }
                    
            &:disabled + .outer-circle {
                background-color: map-get($map, disabled-bg-#{$name})!important;
                border-color: map-get($map, disabled-bc-#{$name})!important;
            }

            &:disabled:checked  ~ .inner-circle {
                background-color: map-get($map, disabled-bg-#{$name})!important;
            }

       }    

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

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

    }