// Switch
//================================================== //

$slider-width: 40px;
$slider-height: 24px;
$slider-compact-height: 20px;
$slider-compact-width: 34px;
$handle-width: 20px;
$handle-compact-width: 16px;

@mixin switch-compact {
  input:empty {
    ~ .label-text,
    ~ label {
      font-size: $input-size-compact-font-size;
      margin-bottom: calc($form-size-field-compact-margin-bottom / 2) + 2;
      padding-left: 38px;
    }

    ~ .label-text::before,
    ~ label::before {
      width: $slider-compact-width;
      height: $slider-compact-height;
    }

    ~ .label-text::after,
    ~ label::after {
      width: $handle-compact-width;
      height: $handle-compact-width;
    }
  }

  input:checked {
    ~ .label-text::after,
    ~ label::after {
      inset-inline-start: 16px;
    }
  }
}

.switch {
  clear: both;
  display: block;
  margin: 0;
  position: relative;

  // Invisible Native Input
  input {
    border: none;
    clip: rect(0, 0, 0, 0);
    height: 14px;
    position: absolute;

    &:focus {
      box-shadow: none;
    }
  }

  // Text Label
  label {
    color: $label-color;
    font-size: $ids-size-font-base;
    display: inline-flex;
    min-height: $slider-height;
    position: relative;
    padding-inline-start: ($slider-width + 8px);
    margin-bottom: $input-field-bottom-margin-sm;
    cursor: pointer;

    &.inline {
      margin-bottom: 0;
    }
  }

  label::before,
  label::after,
  .label-text::before,
  .label-text::after {
    pointer-events: all;
  }

  // Unchecked Styling
  input:empty {
    &:not(:disabled) {
      ~ .label-text,
      ~ label {
        &:hover {
          &::after {
            box-shadow: $switch-hover-box-shadow;
          }
        }
      }
    }


    ~ .label-text,
    ~ label {
      @include no-select();
    }

    // ::before is the bar
    ~ .label-text::before,
    ~ label::before {
      width: $slider-width;
      height: $slider-height;
      border: 1px solid $switch-unchecked-border-color;
      background-color: $switch-unchecked-bar-color;
      border-radius: 99px;
      box-sizing: border-box;
      inset-inline-start: 0;
      top: -2px;
    }

    ~ .label-text::before,
    ~ .label-text::after,
    ~ label::before,
    ~ label::after {
      @include css3(transition, all 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s);

      content: ' ';
      display: block;
      position: absolute;
    }

    // ::after is the actual sphere
    ~ .label-text::after,
    ~ label::after {
      width: $handle-width;
      height: $handle-width;
      background-color: $ids-color-palette-white;
      border-radius: 99px;
      inset-inline-start: 2px;
      top: 0;
    }
  }

  // Checked Styling - Inner
  input:checked ~ .label-text::before,
  input:checked ~ label::before {
    background-color: $switch-checked-bg-color;
    border-color: $switch-checked-bg-color;
  }

  // Checked Styling - Toggle Handle
  input:checked ~ .label-text::after,
  input:checked ~ label::after {
    border-color: $radio-color-checked-initial-fill;
    inset-inline-start: 18px;
  }

  // Focused State
  input:focus-visible ~ label::before {
    box-shadow: 0 0 3px 1px $switch-checked-bg-color;
  }

  // Disabled
  input:disabled {
    ~ label,
    ~ .label-text {
      opacity: .4;
      cursor: default;
      pointer-events: none;
    }
  }

  // Compact
  &.compact {
    @include switch-compact();
  }
}

// Switch in Compact Form Layout
.form-layout-compact {
  .switch {
    @include switch-compact();
  }
}

// Switch in listview
.listview.personalize-col {
  &.is-selectable li {
    cursor: auto;
  }

  .switch {
    .label-text {
      position: relative;
      top: 2px;
    }

    input ~ .label-text::before,
    input ~ label::before {
      inset-inline-start: 235px;
      top: -3px;
    }

    input:empty ~ .label-text::after,
    input:empty ~ label::after {
      inset-inline-start: 238px;
      top: -1px;
    }

    input:checked ~ .label-text::after,
    input:checked ~ label::after {
      inset-inline-start: 254px;
      top: -1px;
    }
  }

  li.child {
    &.arrange-dragging {
      background-color: $listview-bg-color;
    }

    .switch {
      input ~ .label-text::before,
      input ~ label::before {
        inset-inline-start: 220px;
      }

      input:empty ~ .label-text::after,
      input:empty ~ label::after {
        inset-inline-start: 215px;
      }

      input:checked ~ .label-text::after,
      input:checked ~ label::after {
        inset-inline-start: 235px;
      }
    }
  }

  li.arrange-placeholder.draggable {
    background-color: transparent;
  }
}

html[dir='rtl'] .listview.personalize-col .field {
  float: right;
}

// Rule to remove bottom padding on modal if its the last element.
.modal-body-wrapper .switch:last-child {
  margin-bottom: 0;
}