//
// Base styles
//

.c-switch {
  display: inline-block;
  width: $switch-width;
  height: $switch-height;
}

.c-switch-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.c-switch-slider {
  position: relative;
  display: block;
  height: inherit;
  cursor: pointer;
  border: $border-width solid;
  transition: .15s ease-out;
  @include border-radius($border-radius);

  @include themes($form-theme-map) {
    background-color: themes-get-value("input-bg");
    border-color: themes-get-value("input-border-color");
  }

  &::before {
    position: absolute;
    top: $switch-handle-margin;
    left: $switch-handle-margin;
    box-sizing: border-box;
    width: $switch-height - ($switch-handle-margin * 2) - ($border-width * 2);
    height: $switch-height - ($switch-handle-margin * 2) - ($border-width * 2);
    content: "";
    background-color: $white;
    border: 1px solid $border-color;
    transition: .15s ease-out;
    @include border-radius($border-radius / 2);
  }
}

.c-switch-input:checked ~ .c-switch-slider {
  &::before {
    transform: translateX($switch-width - $switch-height);
  }
}

.c-switch-input:focus ~ .c-switch-slider {
  @include themes($form-theme-map) {
    color: themes-get-value("input-focus-color");
    background-color: themes-get-value("input-focus-bg");
    border-color: themes-get-value("input-focus-border-color");
  }
  outline: 0;
  // Avoid using mixin so we can pass custom focus shadow properly
  @if $enable-shadows {
    box-shadow: $input-box-shadow, $input-focus-box-shadow;
  } @else {
    box-shadow: $input-focus-box-shadow;
  }
}

.c-switch-input:disabled ~ .c-switch-slider {
  cursor: not-allowed;
  opacity: .5;
}

//
// Switch Sizes
//

.c-switch-lg {
  @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $switch-handle-margin);
}

.c-switch-sm {
  @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $switch-handle-margin);
}

//
// Switch with label
//
.c-switch-label {
  width: $switch-label-width;

  .c-switch-slider {
    &::before {
      z-index: 2;
    }
    &::after {
      position: absolute;
      top: 50%;
      z-index: 1;
      width: 50%;
      margin-top: -.5em;
      font-size: $switch-font-size;
      font-weight: 600;
      line-height: 1;
      color: $gray-300;
      text-align: center;
      text-transform: uppercase;
      content: attr(data-unchecked);
      transition: inherit;

      @include ltr {
        right: 1px;
      }
    }
  }

  .c-switch-input:checked ~ .c-switch-slider {
    &::before {
      transform: translateX($switch-label-width - $switch-height);
    }
    &::after {
      left: 1px;
      color: $white;
      content: attr(data-checked);
    }
  }

  // Sizes
  &.c-switch-lg {
    @include switch-size($switch-label-lg-width, $switch-lg-height, $switch-lg-font-size, $switch-handle-margin);
  }

  &.c-switch-sm {
    @include switch-size($switch-label-sm-width, $switch-sm-height, $switch-sm-font-size, $switch-handle-margin);
  }
}

//
// Switch 3d
//

.c-switch[class*="-3d"] {
  .c-switch-slider {
    background-color: $gray-100;
    border-radius: 50em;

    &::before {
      top: -1px;
      left: -1px;
      width: $switch-height;
      height: $switch-height;
      border: 0;
      border-radius: 50em;
      box-shadow: 0 2px 5px rgba($black, .3);
    }
  }

  // Sizes
  &.c-switch-lg {
    @include switch-3d-size($switch-lg-width, $switch-lg-height);
  }

  &.c-switch-sm {
    @include switch-3d-size($switch-sm-width, $switch-sm-height);
  }
}

//
// Switch Variants
//

@include theme-variant() {
  //normal style
  .c-switch-#{$color} {
    @include switch-variant($value);
  }
  // 3s style
  .c-switch-3d-#{$color} {
    @include switch-3d-variant($value);
  }
  // outline style
  .c-switch-outline-#{$color} {
    @include switch-outline-variant($value);
  }
  // oposite
  .c-switch-opposite-#{$color} {
    @include switch-opposite-variant($value);
  }
}

//
// Pill Style
//

.c-switch-pill {
  .c-switch-slider {
    border-radius: 50em;

    &::before {
      border-radius: 50em;
    }
  }
}

.c-switch-square {
  .c-switch-slider {
    border-radius: 0;

    &::before {
      border-radius: 0;
    }
  }
}