@use './mixins' as mix;

@include mix.defineVar(--slide-toggle-bar-color, #AEAEAE, #292B36);
@include mix.defineVar(--slide-toggle-bar-color--hover, var(--color-light-300), var(--color-dark-300));
@include mix.defineVar(--slide-toggle-bar-color--checked, var(--btn-primary-color), var(--btn-primary-color));
@include mix.defineVar(--slide-toggle-thumb-color, white, #A4A5B0);
@include mix.defineVar(--slide-toggle-thumb-color--checked, white, white);

.mat-mdc-slide-toggle {

  --mat-slide-toggle-unselected-track-color: var(--slide-toggle-bar-color);
  --mat-slide-toggle-unselected-hover-track-color: var(--slide-toggle-bar-color--hover);
  --mat-slide-toggle-unselected-pressed-track-color: var(--slide-toggle-bar-color);
  --mat-slide-toggle-unselected-focus-track-color: var(--slide-toggle-bar-color);

  --mat-slide-toggle-selected-track-color: var(--slide-toggle-bar-color--checked);
  --mat-slide-toggle-selected-hover-track-color: var(--slide-toggle-bar-color--checked);
  --mat-slide-toggle-selected-pressed-track-color: var(--slide-toggle-bar-color--checked);
  --mat-slide-toggle-selected-focus-track-color: var(--slide-toggle-bar-color--checked);

  --mat-slide-toggle-unselected-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-unselected-hover-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-unselected-focus-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-unselected-pressed-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-disabled-unselected-track-outline-color: var(--slide-toggle-thumb-color--checked);

  --mat-slide-toggle-selected-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-selected-hover-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-selected-focus-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-selected-pressed-handle-color: var(--slide-toggle-thumb-color--checked);
  --mat-slide-toggle-disabled-selected-track-outline-color: var(--slide-toggle-thumb-color--checked);

  --mat-slide-toggle-disabled-selected-handle-color: var(--slide-toggle-selected-handle-color--disabled);
  --mat-slide-toggle-disabled-selected-track-color: var(--slide-toggle-bar-color--checked);
  --mat-slide-toggle-disabled-unselected-track-outline-color: var(--slide-toggle-bar-color--checked);

  --mat-slide-toggle-track-height: 24px;
  --mat-slide-toggle-track-width: 38px;
  --mat-slide-toggle-with-icon-handle-size: 18px;
  --mat-slide-toggle-state-layer-size: 18px;
  --mat-slide-toggle-pressed-handle-size: 18px;

  --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 16px;
  --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0 16px;
  --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0 4px;
  --mat-slide-toggle-track-outline-color: var(--slide-toggle-bar-color);

  .mdc-switch {
    --mat-slide-toggle-disabled-selected-handle-color: white;
    &__track {
      &::before, &::after {
        transition: none !important;
      }
    }
    &__icons {
      display: none;
    }

    &--selected {
      &:disabled {

        .mdc-switch__handle::after {
          opacity: 0.4;
        }
      }
    }
  }
}