@use '../core/theming/color-utility' as utility;

@mixin toggle-color($handle-color, $track-color) {
  --mat-slide-toggle-selected-handle-color: #{$handle-color};
  --mat-slide-toggle-selected-hover-handle-color: #{$handle-color};
  --mat-slide-toggle-selected-pressed-handle-color: #{$handle-color};
  --mat-slide-toggle-selected-focus-handle-color: #{$handle-color};

  --mat-slide-toggle-selected-hover-state-layer-color: #{$handle-color};

  --mat-slide-toggle-selected-track-color: #{$track-color};
  --mat-slide-toggle-selected-hover-track-color: #{$track-color};
  --mat-slide-toggle-selected-pressed-track-color: #{$track-color};
  --mat-slide-toggle-selected-focus-track-color: #{$track-color};

  .mdc-switch__handle {
    border-color: #{$handle-color};
  }
}

@mixin theme($theme: null) {
  .mat-mdc-slide-toggle {
    &.mat-accent {
      @include toggle-color(var(--fds-secondary), utility.get-color-from-token(secondary, 0.54, $theme));
    }

    &.mat-primary {
      @include toggle-color(var(--fds-primary), utility.get-color-from-token(primary, 0.54, $theme));
    }
  }
}