@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./toggle.common";

// Ionic Toggle
// -----------------------------------------

:host {
  --track-background: #{globals.$ion-primitives-neutral-500};
  --track-background-checked: #{globals.ion-color(primary, base)};
  --border-radius: #{globals.$ion-border-radius-full};
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};
  --handle-background: #{globals.$ion-bg-surface-default};
  --handle-background-checked: #{globals.$ion-bg-surface-default};
  --handle-border-radius: #{globals.$ion-border-radius-full};
  --handle-height: #{globals.$ion-scale-500};
  --handle-max-height: #{globals.$ion-scale-500};
  --handle-width: #{globals.$ion-scale-500};
  --handle-spacing: #{globals.$ion-space-050};
  --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,
    right 110ms ease-in-out 80ms;

  @include globals.typography(globals.$ion-body-md-regular);

  z-index: 2; // TODO(ROU-10853): replace this value with a layer token.
}

// Toggle Wrapper
// --------------------------------------------------

.toggle-wrapper {
  align-items: center;

  min-height: globals.$ion-scale-1200;
}

// Toggle Native Wrapper
// ----------------------------------------------------------------

.native-wrapper .toggle-icon {
  width: globals.$ion-scale-1100;
  height: globals.$ion-scale-600;

  /**
   * The handle box shadow should not
   * overflow outside of the track container.
   */
  overflow: hidden;
}

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

// Toggle Bottom Content
// ----------------------------------------------------------------

.toggle-bottom {
  @include globals.typography(globals.$ion-body-sm-medium);
}

// Toggle Hint Text
// ----------------------------------------------------------------

.toggle-bottom .error-text {
  color: globals.$ion-text-danger;
}

.toggle-bottom .helper-text {
  color: globals.$ion-text-subtlest;
}

// Toggle Native Wrapper: Focused
// ----------------------------------------------------------------

:host(.ion-focused) .toggle-icon {
  outline: var(--focus-ring-width) globals.$ion-border-style-solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-width);
}

:host(.ion-focused) {
  outline: none;
}
// Toggle Native Wrapper: Pressed
// ----------------------------------------------------------------
:host(.ion-activated) .toggle-icon {
  background: globals.$ion-bg-neutral-base-press;
}

:host(.ion-activated.toggle-checked) .toggle-icon {
  background: globals.$ion-bg-primary-base-press;
}

// Ionic Toggle: Disabled
// ----------------------------------------------------------

:host(.toggle-disabled) .toggle-icon::after {
  @include globals.disabled-state();
}

// Ionic Toggle Inner Knob: Unchecked
// ----------------------------------------------------------

.toggle-inner {
  will-change: background-color, transform;

  display: flex;

  align-items: center;
  justify-content: center;

  color: globals.$ion-text-default;
}

.toggle-inner .toggle-switch-icon {
  width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;
}

// Toggle Label Placement - Start/Default
// ----------------------------------------------------------------

/**
* Label is on the left of the input in LTR and
* on the right in RTL.
*/
:host .toggle-wrapper {
  justify-content: space-between;
}

:host .label-text-wrapper {
  /**
  * The margin between the label and
  * the input should be on the end
  * when the label sits at the start.
  */
  @include globals.margin(null, globals.$ion-space-400, null, 0);
  color: globals.$ion-text-default;
}

// Toggle Label Placement - End
// ----------------------------------------------------------------

/**
* Label is on the right of the input in LTR and
* on the left in RTL.
*/
:host(.toggle-label-placement-end) .toggle-wrapper {
  justify-content: start;
}

/**
* The margin between the label and
* the input should be on the start
* when the label sits at the end.
*/
:host(.toggle-label-placement-end) .label-text-wrapper {
  @include globals.margin(null, 0, null, globals.$ion-space-400);
}