@use '@angular/material' as mat;
@use 'sass:map';
@use '../../colors' as colors;
// Material button slider mixin
@mixin mat-button-slider-override($theme) {
  $primary: map.get($theme, primary);
  $is-dark: map.get($theme, is-dark);

  .mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused {
    outline: map.get($primary, A400) solid 2px;
    border-radius: 5px;
  }

  .mat-mdc-slide-toggle {
    .mdc-switch {
      &:enabled .mdc-switch__track::after {
        background-color: map.get($primary, A100) !important;
      }
      &.mdc-switch--selected:enabled .mdc-switch__handle::after {
        background-color: map.get($primary, A400) !important;
      }
      .mdc-switch__track {
        height: 22px !important;
        border-radius: 11px !important;
      }
    }
    .mdc-label {
      letter-spacing: normal;
    }
  }

  @if $is-dark {
    .mat-mdc-slide-toggle .mdc-label {
      color: colors.$mic-text-colors-normal-light;
    }
    .mdc-switch--disabled + .mdc-label {
      color: colors.$mic-layout-colors-white-disabled !important;
    }
  }
}
