@import "../../../theme/global";
 $toggle-width:                     2.75rem !default;
 $toggle-height:                    1.5rem !default;
 $toggle-border-radius:             $toggle-height / 2 !default;
 $toggle-handle-size:               1.2rem !default;

:host {
  box-sizing: content-box !important;
  display: inline-block;
  contain: content;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  z-index: 2;
  width: $toggle-width;
  height: $toggle-height;
}

:host(:focus) {
  outline: none;
}
:host(.lar-toggle-disabled) {
  pointer-events: none;
  opacity: 0.3;
  filter: grayscale(0.4);
}

input {
  @include input-cover();
  pointer-events: none;
}

.lar-toggle-icon {
  @include border-radius($toggle-border-radius);
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: background-color 0.2s ease;
  background: rgba(0, 0, 0, 0.1);
  overflow: visible;
  pointer-events: none;
}

.lar-toggle-inner {
  position: absolute;
  top: 50%;
  left: 0.15rem;
  transform: translateY(-50%);
  @include border-radius(50%);
  width: $toggle-handle-size;
  height: $toggle-handle-size;
  background: $background-color;
  transition: left 0.2s ease;
  will-change: left;
}

:host(.lar-toggle-checked) .lar-toggle-inner {
  left: calc(100% - #{$toggle-handle-size} - 0.15rem);
}

@mixin generate-toggle-color($color-name) {
  $value: map-get($colors, $color-name);
  $base: map-get($value, base);
  $base-rgb: color-to-rgb-list($base);

  // Checked state - solid color track
  :host(.lar-color-#{$color-name}.lar-toggle-checked) .lar-toggle-icon {
    background: lar-color($color-name, base);
  }

  :host(.lar-color-#{$color-name}.lar-toggle-checked) .lar-toggle-inner {
    background: $background-color;
  }

  // Unchecked state - subtle color hint
  :host(.lar-color-#{$color-name}) .lar-toggle-icon {
    background: rgba(var(--lar-color-#{$color-name}-rgb, #{$base-rgb}), 0.6);
  }
}

@each $color-name, $value in $colors {
   @include generate-toggle-color($color-name);
}