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

/**
* Primary checkbox
**/
mat-checkbox {
  .mat-checkbox-inner-container {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  .mat-checkbox-frame {
    border-radius: 3px;
    border: 1px solid var(--s1-N-60-color);
  }

  .mat-checkbox-background {
    border-radius: 3px;
  }

  // CHECKED
  &.mat-checkbox-checked.mat-accent,
  &.mat-checkbox-indeterminate.mat-accent {
    .mat-checkbox-background {
      background-color: var(--s1-P-40-color);
    }
  }

  // DISABLED + INDETERMINATE
  &.mat-checkbox-disabled.mat-checkbox-indeterminate {
    .mat-checkbox-background {
      background-color: var(--s1-N-30-color);
    }
  }

  // DISABLED + CHECKED
  &.mat-checkbox-disabled.mat-checkbox-checked {
    .mat-checkbox-background {
      background-color: var(--s1-N-30-color);
    }
  }

  // DISABLED + NOT CHECKED
  &.mat-checkbox-disabled:not(.mat-checkbox-checked) {
    .mat-checkbox-frame {
      border: 1px solid var(--s1-N-30-color);
      background-color: var(--s1-N-15-color);
    }
  }

  &.mat-checkbox-disabled {
    .mat-checkbox-label {
      color: var(--s1-N-40-color);
    }
  }

  .mat-checkbox-label {
    color: var(--s1-N-60-color);
  }

  &.transparent-checkbox {
    //@extend .mgmt-transparent-checkbox;
  }

  &.round-checkbox {
    //@extend .mgmt-round-checkbox;
  }

  .mat-checkbox-ripple {
    @extend %mat-ripple;
  }

  path {
    transform: translate(2px, 2px) scale(0.8);
  }

  .mat-checkbox-checkmark-path {
    stroke: var(--s1-N-0-color) !important;
  }
}