@import "../utilities/mixins";

///Theme for component switch.
///
///@author Emilio Dolce<emilio.dolce@micegroup.it>
///@param $section
///@param $map
@mixin component-switch3($section, $map) {
  @if ($section == "switch") {
    @include switch3-color("basic", $map);
    @include switch3-color("primary", $map);
    @include switch3-color("danger", $map);
  }
}

/// Set button switch.
///
/// @author Emilio Dolce<emilio.dolce@micegroup.it>
/// @param $name
/// @param $map
@mixin switch3-color($name, $map) {
  .fk-switch3-#{$name} {
    position: relative;
    display: inline-block;
    width: 4rem;
    height: 1.3rem;
    line-height: initial;

    .fk-slider3-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: 2.425rem;
      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-slider3-container-disabled {
      background-color: map-get($map, disabled-bg-#{$name}) !important;
      border-color: map-get($map, disabled-bg-#{$name}) !important;
      cursor: default;
    }

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

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

    .fk-slider3-true {
      transform: translateX(calc(2.425rem - 0.75rem));
    }
    .fk-slider3-false {
      transform: translateX(0);
    }
    .fk-slider3-null {
      transform: translateX(calc(2.425rem - 1.5rem));
    }

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