@use 'sass:color';
@use 'sass:list';
@use '../theme.scss' as *;

$switchRadiusSize: $baseInputRadius;

.be-switch {
  display: inline-block;
  cursor: pointer;
  input {
    display: none;
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  &.slide {
    position: relative;
    width: 3em;
    height: 1.3em;
    &:not(.inside) {
      margin: 0.15em;
    }
    // top: 0.15em;
    input:checked + .switch {
      background-color: $primary;
    }
    input:checked + .switch:before {
      transform: translateX(1.7em);
    }
    .switch {
      cursor: pointer;
      position: absolute;
      inset: 0.1em;
      // top: 0.15em;
      // bottom: 0;
      // left: 0.15em;
      // right: 0;
      display: inline-block;
      background-color: #c4c4c4;
      border-radius: calc($switchRadiusSize + 2px);
      /*transition: all 400ms ease-out;*/
      &:before {
        content: '';
        position: absolute;
        width: 1.6em;
        height: 1.6em;
        top: -0.25em;
        left: -0.25em;
        background-color: #fff;
        border-radius: $switchRadiusSize;
        //border: 1px solid #c4c4c4;
        box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.16);
        transition: all 250ms ease-out;
        box-sizing: border-box;
      }
    }
    &.inside {
      width: 42px;
      height: 22px;
      top: 0;
      input:checked + .switch:before {
        transform: translateX(20px);
      }
      .switch {
        inset: 0;
      }
      .switch:before {
        width: 18px;
        height: 18px;
        top: 2px;
        left: 2px;
      }
    }
    &.round {
      .switch {
        border-radius: 1em;
        &:before {
          border-radius: 50%;
        }
      }
    }
    &:hover {
      .switch:before {
        // box-shadow: 0 0 0 4px rgba(109, 157, 114, 0.3);
        box-shadow: 0 0 0 4px color.change($primary, $alpha: 0.3);
      }
    }
  }
  &.button {
    position: relative;
    font-size: 0.9em;
    background-color: var(--suf);
    padding: 2px;
    border-radius: calc($switchRadiusSize + 2px);
    //box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.16);
    &:before {
      content: '';
      position: absolute;
      border-radius: $switchRadiusSize;
      background-color: var(--primary);
      // width: calc(50% - 2px);
      // height: calc(100% - 4px);
      top: 2px;
      bottom: 2px;
      left: 50%;
      right: 2px;
      transition:
        left 500ms ease,
        right 150ms ease;
    }
    &:has(input:checked) {
      &:before {
        left: 2px;
        right: 50%;
        transition:
          right 500ms ease,
          left 150ms ease;
      }
    }
    span {
      background-color: transparent !important;
      position: relative;
      z-index: 3;
    }
    &.round {
      border-radius: 1em;
      span.on,
      span.off {
        border-radius: 1em;
      }
      &:before {
        border-radius: 1em;
      }
    }
    input {
      & ~ .off {
        background-color: $primary;
        color: $white;
        font-weight: 700;
        border-radius: $switchRadiusSize;
        // margin-left: -5px;
        //box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.36);
      }
      & ~ .on {
        background-color: transparent;
        font-weight: 500;
      }
    }
    input:checked {
      & ~ .on {
        background-color: $primary;
        color: $white;
        font-weight: 700;
        border-radius: $switchRadiusSize;
        // margin-right: -5px;
        //box-shadow: 0 0 5px 0 #2985DB;
      }
      & ~ .off {
        background-color: transparent;
        font-weight: 500;
        color: #333333;
        box-shadow: none;
      }
    }
    span {
      display: inline-block;
      padding: 0.5em 0.8em;
      line-height: 1em;
    }
    //.active {
    //  background-color: #2985DB;
    //  color: #ffffff;
    //  font-weight: 700;
    //  border-radius: 4px;
    //}
    // &-slide {
    //   position: relative;
    //   overflow: hidden;
    //   &:before {
    //     content: '';
    //     position: absolute;
    //     border-radius: $switchRadiusSize;
    //     background-color: var(--primary);
    //     width: calc(50% - 2px);
    //     height: calc(100% - 4px);
    //     top: 2px;
    //     right: 2px;
    //     transition: right 250ms ease;
    //   }
    //   &:has(input:checked) {
    //     &:before {
    //       right: 50%;
    //     }
    //   }
    //   span {
    //     background-color: transparent !important;
    //     position: relative;
    //     z-index: 3;
    //   }
    //   &.round {
    //     &:before {
    //       border-radius: 1em;
    //     }
    //   }
    // }
  }
}

.label-text {
  display: inline-block;
  margin-left: 20px;
  position: relative;
  top: 0;
}
// @each $color, $values in list.join($brandColors, $stateColors) {
//   $bgColor: #{list.nth($values, 1)};
//   $hoverColor: #{list.nth($values, 2)};
//   $textColor: #{list.nth($values, 3)};
//   @if color-contrast(list.nth($values, 1), list.nth($values, 3)) < 1.8 {
//     $textColor: $black;
//   }
//   .be-switch {
//     &.#{$color} {
//       background-color: transparent;
//       &.slide {
//         input:checked + .switch {
//           background-color: $bgColor;
//           color: $textColor;
//         }
//       }
//       &.button {
//         input ~ .off {
//           background-color: $bgColor;
//           color: $textColor;
//         }
//         input:checked ~ .on {
//           background-color: $bgColor;
//           color: $textColor;
//         }
//       }
//       &.disabled,
//       &[disabled],
//       &:disabled {
//         cursor: default;
//         //opacity: 0.5;
//         color: #c4c4c4 !important;
//         border-color: #c4c4c4 !important;
//         background-color: #f2f2f2 !important;
//         pointer-events: none;
//         box-shadow: none;
//       }
//     }
//   }
// }

@each $color, $value in $colors {
  $hoverColor: color.adjust($value, $lightness: -10%);
  $textColor: $white;
  @if color-contrast($value, $textColor) < 1.8 {
    $textColor: $black;
  }
  .be-switch {
    background-color: transparent;
    &.#{$color} {
      &.slide {
        input:checked + .switch {
          background-color: $value;
        }
      }
      &.button {
        &:before {
          background-color: $value;
        }
      }
    }
  }
}