@import "typography";
@import "colors";

// CHECKBOX STYLES
.mat-checkbox {
  &.qms-group-options {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    padding: 5px 15px 5px 15px;
    border-radius: 4px;

    .mat-checkbox-inner-container {
      margin-right: 19px;

      &:hover {
        .mat-ripple-element {
          opacity: 1;
          background: black(0.08);
        }
      }
    }

    .mat-ripple-element {
      background: black(0.12);
    }

    .mat-checkbox-label {
      display: flex;
      flex-direction: column;
    }

    .text-label {
      font-size: 1rem;
      line-height: 28px;
      color: $default-color;
      white-space: break-spaces;
    }

    .text-help {
      font-size: 0.75rem;
      line-height: 16px;
      color: black(0.6);
      white-space: break-spaces;
    }

    .mat-error {
      color: $error;
    }

    &.cdk-keyboard-focused {
      &:not(.ng-invalid) {
        .mat-checkbox-persistent-ripple {
          opacity: 1;
          background-color: black(0.08);
          // border: 2px solid $primary;
          // background: $secondary-light-6-opacity;
        }
      }
    }

    &.cdk-keyboard-focused.ng-invalid {         
      .mat-checkbox-persistent-ripple {
        opacity: 1;
        background-color: black(0.08);
        // border: 2px solid $secondary;
      }
    }

    &.mat-checkbox-checked.cdk-keyboard-focused
      .mat-checkbox-persistent-ripple {
      // opacity: 1;
      // border: 2px solid $secondary;
      background: $secondary-light-6-opacity;
    }

    &.mat-checkbox-disabled:not(.mat-checkbox-checked) {
      .mat-checkbox-frame {
        border-color: black(0.38);
        background: white;
        opacity: 0.68;
      }
    }

    &.error-form {
      .mat-checkbox-frame {
        // border: 2px solid $error;
      }
    }

    &.mat-checkbox-checked {
      background: rgba(207, 71, 20, 0.12);
    }

    &.mat-checkbox-checked {
      &:not(.mat-checkbox-disabled) {
        .mat-ripple-element {
          background: $secondary-light-6-opacity;
        }
      }
    }

    &:active:not(.mat-checkbox-disabled) {
      .mat-ripple-element {
        // background: black(0.12) !important;
      }
    }

    &.mat-checkbox-indeterminate,
    &.mat-checkbox-checked {
      .mat-checkbox-background {
        background: $secondary;
      }
    }
  }
}
