@import "../utilities/mixins";

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

/// Set button switch.
///
/// @author Federico Gambardella<fedega86@libero.it>
/// @param $name
/// @param $map
@mixin switch-color($name, $map) {
    .fk-switch-#{$name} {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.3rem;
        line-height: initial;

        .fk-slider-container {
            background-color: map-get($map, bg-#{$name});
            border: map-get($map, border-#{$name});
            display: inline-flex;
            flex-shrink: 0;
            -webkit-box-pack: start;
            justify-content: flex-start;
            box-sizing: content-box;
            cursor: pointer;
            border-radius: 9999px;
            padding: 2px;
            width: 1.675rem;
            height: 0.75rem;

           /*  &:hover {
                background-color: map-get($map, hover-bg-#{$name});
                border: 1px solid map-get($map, hover-#{$name}) !important;
            } */

            &:focus {
                -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});
            }

            
        }


        input[type=checkbox] {
            &:disabled {
               
                .fk-switch-label {
                    color: map-get($map, disabled-text-#{$name}) !important;
                    cursor: default;
                }
            }

           
        }

        .fk-slider-container-disabled {
            background-color: map-get($map, disabled-bg-#{$name}) !important;
            border-color: map-get($map, disabled-bg-#{$name}) !important;
            cursor: default;
        }

        .fk-slider {
            background-color: white;
            transition-property: transform;
            border-radius: inherit;
            width: 0.75rem;
            height: 0.75rem;
            transition: all 0.1s ease-in-out;

           
        }

        .fk-slider-container-active {
              background-color: map-get($map, checked-#{$name});
              border-color: map-get($map, checked-#{$name});
        }

        .fk-slider-active {
            transform: translateX(calc(1.675rem - 0.75rem));
        }

        .fk-switch-label {
            color: map-get($map, label-#{$name}) !important;
        }
    }
}