.mat-mdc-slide-toggle{
  .mdc-switch {
    width: 36px !important;
  }
  .mdc-switch__icons{
    display: none;
  }
  .mdc-label{
    padding: 0;
    font-size: var(--font-size-m)
  }
  .mdc-switch__track{
    height: 20px !important;
    background-color: var(--color-surface-alt-idle);
    border-radius: var(--border-radius-round) !important;
    transition: all 100ms ease-in-out;
  }
  .mdc-switch__track::before,
  .mdc-switch:enabled .mdc-switch__track::after{
    border: none !important;
  }
  .mdc-switch__handle{
    width: 16px !important;
    height: 16px !important;
    border-radius: var(--border-radius-round) !important;
    background-color: var(--color-on-surface-alt-primary);
    left: 0 !important;
  }
  .mdc-switch__handle-track{
    left: 2px;
    transition: left 100ms ease-in-out;
  }
  &.mat-mdc-slide-toggle-checked{
    .mdc-switch__handle-track {
      left: 18px !important;
    }
    .mdc-switch__track{
      background-color: var(--color-surface-brand-idle);
    }
    .mdc-switch__track::after{
      border: none !important;
    }
    .mdc-switch--disabled{
      .mdc-switch__track{
        background-color: var(--color-surface-brand-disabled);
      }
    }
  }
  &:hover{
    .mdc-switch__track{
      background-color: var(--color-surface-alt-hover);
    }
    &.mat-mdc-slide-toggle-checked{
      .mdc-switch__track{
        background-color: var(--color-surface-brand-hover);
      }
      .mdc-switch--disabled{
        .mdc-switch__track{
          background-color: var(--color-surface-brand-disabled);
        }
      }
    }
  }
  &:active{
    .mdc-switch__track{
      background-color: var(--color-surface-alt-press);
    }
    &.mat-mdc-slide-toggle-checked{
      .mdc-switch__track{
        background-color: var(--color-surface-brand-press);
      }
    }
  }
  .mdc-switch--disabled{
    .mdc-switch__track{
      background-color: var(--color-on-surface-neutral-disabled);
    }
  }
}