@import "../../themes/ionic.globals";

// Toggle
// --------------------------------------------------

:host {
  /**
   * @prop --background: Background of the toggle
   * @prop --background-checked: Background of the toggle when checked
   * @prop --handle-background: Background of the toggle handle
   * @prop --handle-background-checked: Background of the toggle handle when checked
   */

  // TODO can we remove important here
  /* stylelint-disable-next-line declaration-no-important */
  box-sizing: content-box !important;

  display: inline-block;

  contain: content;
  touch-action: none;
  user-select: none;
}

:host(.toggle-key) input {
  border: 2px solid #5e9ed6;
}

:host(:focus) {
  outline: none;
}

:host(.toggle-disabled) {
  pointer-events: none;
}

input {
  @include input-cover();

  pointer-events: none;
}