@use '../../../styles/tools' as *;
@use '../../settings/variables' as theme-variables;
@import 'variables';

ion-toggle {
  --background: #{$toggle-background-color};
  --background-checked: #{$toggle-background-checked-color};
  --border-color: transparent;
  --handle-background: #{$toggle-handle-color};
  --handle-background-checked: #{$toggle-handle-checked-color};
  --handle-height: 16px;
  --handle-spacing: 0px;
  --handle-transition: all 0.2s ease;
}

// @media (prefers-color-scheme: dark) {
//   .md body ion-toggle,
//   .ios body ion-toggle,
//   body ion-toggle {
//     --background: var(--sd-sys-color-surface-inset);
//     --background-checked: var(--sd-sys-color-primary-subtle);
//     --handle-background-checked: var(--sd-sys-color-primary);
//     --border-color: #{$toggle-border-color};

//     &.toggle-checked::part(track) {
//       --border-color: #{$toggle-border-checked-color};
//     }
//   }
// }

ion-toggle {
  padding: 0px;
  padding-right: 8px;
  height: 22px;

  &::part(track) {
    height: 20px;
    width: 36px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-color);
  }

  &::part(handle) {
    @include shadow(sm);
    margin-left: 2px;
    height: 16px;
    width: 16px;
  }
}