@import "./toggle";
@import "./toggle.ios.vars";

// iOS Toggle
// -----------------------------------------

:host {
  --background: #{$toggle-ios-background-color-off};
  --background-checked: #{ion-color(primary, base)};
  --border-radius: #{$toggle-ios-border-radius};
  --handle-background: #{$toggle-ios-handle-background-color};
  --handle-background-checked: #{$toggle-ios-handle-background-color};
  --handle-border-radius: #{$toggle-ios-handle-border-radius};
  --handle-box-shadow: #{$toggle-ios-handle-box-shadow};
  --handle-height: #{$toggle-ios-handle-height};
  --handle-max-height: #{$toggle-ios-handle-max-height};
  --handle-width: #{$toggle-ios-handle-width};
  --handle-spacing: #{$toggle-ios-border-width};
  --handle-transition: #{$toggle-ios-transition};

  width: $toggle-ios-width;
  height: $toggle-ios-height;

  contain: strict;

  overflow: hidden;
}

:host(.ion-color.toggle-checked) .toggle-icon {
  background: current-color(base);
}


// iOS Toggle Background Track: Unchecked
// ----------------------------------------------------------

.toggle-icon {
  // Needed to prevent visual glitch in safari/iOS
  // See https://github.com/ionic-team/ionic/issues/14626
  transform: translate3d(0, 0, 0);

  transition: background-color $toggle-ios-transition-duration;
}


// iOS Toggle Inner Knob: Unchecked
// ----------------------------------------------------------

.toggle-inner {
  will-change: transform;
}


// iOS Toggle Background Oval: Activated or Checked
// ----------------------------------------------------------

:host(.toggle-activated) .toggle-icon::before,
:host(.toggle-checked) .toggle-icon::before {
  transform: scale3d(0, 0, 0);
}


// iOS Toggle Background Oval: Activated and Checked
// ----------------------------------------------------------

:host(.toggle-activated.toggle-checked) .toggle-inner::before {
  transform: scale3d(0, 0, 0);
}


// iOS Toggle Inner Knob: Activated and Unchecked
// ----------------------------------------------------------

:host(.toggle-activated) .toggle-inner {
  width: calc(var(--handle-width) + 6px);
}


// iOS Toggle Inner Knob: Activated and Checked
// ----------------------------------------------------------

// when pressing down on the toggle and it IS checked
// the knob is wider so move it left by 6px in the transform
:host(.toggle-activated.toggle-checked) .toggle-icon-wrapper {
  @include ltr() {
    // transform by 100% - handle width - 6px (width addition on activated)
    transform: translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);
  }

  @include rtl() {
    // transform by -100% + handle width + 6px (width addition on activated)
    transform: translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);
  }
}


// iOS Toggle: Disabled
// ----------------------------------------------------------

// .item-ios.item-toggle-disabled ion-label

:host(.toggle-disabled) {
  opacity: $toggle-ios-disabled-opacity;
}


// iOS Toggle Within An Item
// ----------------------------------------------------------

:host(.in-item[slot]) {
  @include margin($toggle-ios-media-margin);
  @include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start);
}

:host(.in-item[slot="start"]) {
  @include padding($toggle-ios-item-start-padding-top, $toggle-ios-item-start-padding-end, $toggle-ios-item-start-padding-bottom, $toggle-ios-item-start-padding-start);
}
