// ********************************************
// container definition
$el-container: #{$prefix}-form-element-toggle;


// ********************************************
// block
$el-box: #{$el-container}-box;

// ********************************************
// elements
$el-input: #{$el-container}__input;
$el-on: #{$el-container}__icon-on;
$el-off: #{$el-container}__icon-off;
$el-checkbox: #{$el-container}__hidden-checkbox;

// ********************************************
// modifiers
$el-container-checked: #{$el-container}--checked;
$el-container-error: #{$el-container}--error;
$el-container-disabled: #{$el-container}--disabled;
$el-container-read-only: #{$el-container}--readonly;
$el-container-s: #{$el-container}--s;
$el-container-m: #{$el-container}--m;
$el-container-l: #{$el-container}--l;


// ********************************************
// var
$toggle-width-diff: calc(#{space(m)} * 0.9166);
$toggle-width: calc((#{space(m)} * 0.9166) * 2);
$toggle-width-m: calc((#{space(m)} * 0.9166) * 3);
$toggle-width-l: calc((#{space(m)} * 0.9166) * 4);

$toggle-height: space(s);
$toggle-height-m: space(m);
$toggle-height-l: space(l);

$diff-spacing: calc(#{space(xxs)} * 0.5);
$toggle-circle: calc(#{$toggle-height} - (#{space(xxs)} * 0.5));
$toggle-circle-m: calc(#{$toggle-height-m} - (#{space(xxs)} * 0.5));
$toggle-circle-l: calc(#{$toggle-height-l} - (#{space(xxs)} * 0.5));
$toggle-circle-left-diff: calc((#{space(xxs)} * 0.5) * 0.5);
$toggle-circle-right-diff:calc((#{space(xxs)} * 0.5) * (-0.5));

$toggle-transition: background-color 0.1s ease 0s, box-shadow 0.1s ease 0s, opacity 0.1s ease 0s;

$toggle-border-style: solid 1px;
$toggle-border-neutral: $toggle-border-style color(neutral, 700);
$toggle-border-on:  $toggle-border-style color(brand-primary, 700);
$toggle-border-hover: $toggle-border-style color(brand-primary, 800);

$background-neutral: color(neutral, 500);
$background-on: color(brand-primary, 600);
$background-hover: color(brand-primary, 700);

$focus-neutral: 0 0 3px 2px rgba(color(neutral, 500),0.5);
$focus-on: 0 0 3px 2px rgba(color(brand-primary, 700),0.5);

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
// ********************************************
// Default state
.#{$el-container}{
  @include border-radius(space(xs));
  position: relative;
  display: inline-block;
  opacity: 1;
  outline: none;
  touch-action: none;
  user-select: none;
  transition: $toggle-transition;
  height: space(s);
  width: $toggle-width;
  &.ds-form-element-toggle-hide {
    opacity: 0;
  }
  &.#{$el-container-s}.#{$el-input}{
    left: 37px;
  }
  &.#{$el-container-m}.default-state-checked .#{$el-input}{    
    left: 54px;
  }
  &.#{$el-container-l}.default-state-checked .#{$el-input}{
    left: 71px
  }
  position: relative;
  z-index: 0;
  &:focus {
    &:before{
      display: block;
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      pointer-events: none;
      border: solid 2px color(brand-primary, 600);
    }
    &:after{
      display: block;
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      pointer-events: none;
      border: solid 1px color(brand-primary, 300);
    }
  }
  &:after, &:before{
    @include border-radius(space(s));
  }
}

.#{$el-box}{
  @include border-radius(space(xs));
  border: $toggle-border-neutral;
  height: space(s);
  width: $toggle-width;
  background: $background-neutral;
  color:color-contrast($background-neutral,color(neutral, 900), color(neutral, 000));
  transition: $toggle-transition;
  display: flex;
  justify-content: flex-end;
  position: relative;
  cursor: pointer;
  &:hover{
    background: color(neutral, 600);
  }
}

.#{$el-input}{
  @include border-radius(50%);
  height: $toggle-circle;
  width: $toggle-circle;
  background: color(neutral, 000);
  transition: $toggle-transition;
  display: inline-block;
  position: absolute;
  top: calc(#{space(xxs)} * 0.25);  // show 1px of border
  left: 0;
  margin-left: $toggle-circle-left-diff;
  cursor: pointer;
  &.default-state-checked{
    left: 58px;
  }
}

.#{$el-on},
.#{$el-off}{
  width: 100%;
  text-align: center;
  @include body-micro-text-style(semibold);
  padding: 0 space(xxs);
  line-height: $toggle-height;
}
.#{$el-on}{
  padding: 0 $toggle-circle 0 $diff-spacing;
}
.#{$el-off}{
  padding: 0 $diff-spacing 0 $toggle-circle;
}

.#{$el-checkbox} {
  display: none;
}

// ********************************************
// Sizes
.#{$el-container-m} {
  @include border-radius(space(m));
  width: $toggle-width-m;
  height: space(m);

  .#{$el-box}{
    @include border-radius(space(m));
    height: space(m);
    width: $toggle-width-m;
  }

  .#{$el-input}{
    height: $toggle-circle-m;
    width: $toggle-circle-m;
  }

  .#{$el-on},
  .#{$el-off}{
    width: 100%;
    text-align: center;
    line-height: $toggle-height-m;
    font-size: font-size(500);
    padding: 0 space(xs);
  }
  .#{$el-on}{
    padding: 0 $toggle-circle-m 0 space(xxs);
  }
  .#{$el-off}{
    padding: 0 space(xxs) 0 $toggle-circle-m;
  }
  
    &:after, &:before{
      @include border-radius(space(m));
    }
  
}

.#{$el-container-l} {
  @include border-radius(space(l));
  width: $toggle-width-l;
  height: space(l);

  .#{$el-box}{
    @include border-radius(space(l));
    height: space(l);
    width: $toggle-width-l;
  }

  .#{$el-input}{
    height: $toggle-circle-l;
    width: $toggle-circle-l;
  }

  .#{$el-on},
  .#{$el-off}{
    width: 100%;
    text-align: center;
    @include body-micro-text-style(semibold);
    line-height: $toggle-height-l;
    font-size: font-size(700);
  }

  .#{$el-on}{
    padding: 0 $toggle-circle-l 0 space(xs);
  }
  .#{$el-off}{
    padding: 0 space(xs) 0 $toggle-circle-l;
  }

    
  &:after, &:before{
    @include border-radius(space(l));
  }
}

// ********************************************
// Checked
.#{$el-container-checked}{

  .#{$el-box}{
    justify-content: flex-start;
    border: $toggle-border-on;
    background: $background-on;
    color:color-contrast($background-neutral, color(neutral, 900), color(neutral, 000));
  }

  .#{$el-input} {
    margin-left: $toggle-circle-right-diff;
  }

  &:hover {
    .#{$el-box}{
      border: $toggle-border-hover;
      background: $background-hover;
    }
  }
  &:focus {
    &:before{
      border: solid 2px color(brand-primary, 700);
    }
    &:after{
      border: solid 1px color(brand-primary, 300);
    }
  }

  &:active{
    background: color(brand-primary, 700);
  }
}

// ********************************************
// Disable
.#{$el-container-disabled}{
  .#{$el-box}{
    cursor: not-allowed;
    border: solid 1px transparent;
    background: color(neutral, 100);
    color: #5C6574;
  }

  .#{$el-input}{
    background: color(neutral, 000);
  }

  &:hover {
    .#{$el-box}{
      border: solid 1px transparent;
      background: color(neutral, 100);
    }
  }
}


// ********************************************
// Read Only
.#{$el-container-read-only}{

  .#{$el-box}{
    cursor: not-allowed;
    border: $toggle-border-neutral;
    background: $background-neutral;
    color: color(neutral, 000);
  }

  .#{$el-input}{
    background: color(neutral, 100);
  }

  &:hover {
    .#{$el-box}{
      border: $toggle-border-neutral;
      background: $background-neutral;
    }
  }
  &:focus {
    @include box-shadow($focus-neutral);
  }

}