@import 'extend-class/global-mat-riple.extend';

mat-slide-toggle.mat-slide-toggle {
  &.mat-disabled {
    opacity: 1;
  }

  .mat-slide-toggle-bar {
    height: 16px;
    width: 32px;
  }

  // Toggle ON
  &.mat-checked {
    .mat-slide-toggle-thumb {
      background-color: var(--s1-N-0-color);
    }

    &:not(.mat-disabled) {
      .mat-slide-toggle-bar {
        background-color: var(--s1-P-40-color);
      }
    }

    &.mat-disabled {
      .mat-slide-toggle-bar {
        background-color: var(--s1-P-5-color);
      }

      .mat-slide-toggle-thumb {
        background-color: var(--s1-N-0-color);
      }
    }
  }

  // Toggle OFF
  &:not(.mat-checked) {
    &.mat-disabled {
      .mat-slide-toggle-bar {
        background-color: var(--s1-N-20-color);
      }
    }

    &:not(.mat-disabled) {
      .mat-slide-toggle-bar {
        background-color: var(--s1-N-50-color);
      }
    }
  }

  .mat-slide-toggle-thumb {
    background-color: var(--s1-N-0-color);
    border-radius: 50%;
    box-shadow: none;
    height: 12px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 12px;
  }

  .mat-slide-toggle-thumb-container {
    width: 16px;
    height: 16px;
    top: 0;
  }

  .mat-slide-toggle-ripple {
    @extend %mat-ripple;
  }
}