@use '@angular/material' as mat;
@mixin mw-mat-toggle-override($theme) {
  $accent: map-get($theme, accent);

  $background: ();
  $foreground: ();

  $theme-background: map-get($theme, background);
  $theme-foreground: map-get($theme, foreground);

  $background: map-merge($background, $theme-background);
  $foreground: map-merge($foreground, $theme-foreground);

  mat-slide-toggle {
    .mat-slide-toggle-ripple {
      width: 36px;
      height: 36px;
      top: -8px;
      left: -8px;
      .mat-ripple-element {
        width: 36px !important;
        height: 36px !important;
        left: 0px !important;
        top: 0px !important;
      }
    }
    &.mat-accent {
      .mat-slide-toggle-label {
        .mat-slide-toggle-bar {
          background-color: var(--mw-disabled-text);
        }
      }
      &.mat-checked .mat-slide-toggle-label {
        .mat-slide-toggle-bar {
          background-color: rgba(mat.get-color-from-palette($accent), 0.38);
        }
      }
    }
    .mat-slide-toggle-thumb {
      @include mat.elevation(1);
      background-color: map-get($background, card);
    }
    .mat-slide-toggle-content {
      @extend .mw-body2;
      color: var(--mw-text);
    }
    .mat-slide-toggle-bar {
      margin-right: 16px;
    }
    &.mat-slide-toggle-label-before .mat-slide-toggle-bar {
      margin-left: 16px;
      margin-right: 0px;
    }
  }

  .mw-slide-toggle-group {
    mat-label {
      @extend .mw-caption;
      display: block;
      margin-bottom: 8px;
      color: var(--mw-secondary-text);
    }
    mat-slide-toggle {
      display: block;
      &:not(:last-child) {
        margin-bottom: 16px;
      }
    }
  }
}