@import "../theme/variable";
@import "../theme/mixins";
@import "typography";

// CHECKBOX STYLES
.mat-mdc-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;
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    .mat-checkbox-inner-container {
      margin-right: 19px;
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      &.mat-checkbox-inner-container-no-side-margin {
        margin-right: 0px;
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    &:hover:not(.mat-checkbox-disabled) {
      background-color: black(0.08);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    &:active:not(.mat-checkbox-disabled) {
      background-color: black(0.12);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    .mat-checkbox-label {
      display: flex;
      flex-direction: column;
    }

    .text-label {
      font-size: 1rem;
      line-height: 28px;
      color: theme-apply($default-color);
    }

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

    .mat-mdc-form-field-error {
      color: theme-apply($error);
    }

    &.error-form {
      border-bottom: 2px solid theme-apply($error);
    }

    &.cdk-keyboard-focused {
      background-color: black(0.08);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    &.mat-checkbox-disabled:not(.mat-checkbox-checked) {
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      .mat-checkbox-background {
        background: black(0.24);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      &.mat-checkbox-indeterminate {
        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
        .mat-checkbox-background {
          background: theme-apply($primary-dark-1-disable-background);
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      .mat-checkbox-frame {
        border-color: black(0.38);
        background: white;
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    &.mat-checkbox-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      .mat-checkbox-background {
        background-color: theme-apply($primary-dark-1-disable-background);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    &.mat-mdc-checkbox-checked {
      background: theme-apply($primary-light-12-opacity);

      &.cdk-keyboard-focused {
        &:not(.ng-invalid) {
          background-color: theme-apply($primary-dark-24-opacity);
        }
      }

      .mat-ripple-element {
        background-color: theme-apply($primary-circle-background-hover);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      &:hover:not(.mat-checkbox-disabled) {
        background-color: theme-apply($primary-dark-24-opacity);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      &:active:not(.mat-checkbox-disabled) {
        background-color: theme-apply($primary-light-32-opacity);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      &.mat-checkbox-disabled {
        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
        .mat-checkbox-inner-container {
          background-color: theme-apply($disabled-select-input-checked);
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      .mat-checkbox-inner-container {
        background-color: theme-apply($primary);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      .mat-checkbox-frame {
        border-color: theme-apply($primary);
      }

      .mdc-checkbox__native-control:enabled:checked
        ~ .mdc-checkbox__background {
        border-color: theme-apply($primary);
        background-color: theme-apply($primary);

        .mdc-checkbox
          .mdc-checkbox__native-control:enabled
          ~ .mdc-checkbox__background
          .mdc-checkbox__checkmark {
          color: white;
        }
      }
    }

    &.mat-default {
      .mdc-checkbox__native-control:enabled:indeterminate
        ~ .mdc-checkbox__background,
      .mdc-checkbox__native-control[data-indeterminate="true"]:enabled
        ~ .mdc-checkbox__background {
        border-color: theme-apply($primary);
        background-color: theme-apply($primary);
      }
    }

    //-------------------Start No Label-----------------------------//
    &.none-label {
      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      &:hover:not(.mat-checkbox-disabled),
      &:active:not(.mat-checkbox-disabled),
      &.cdk-keyboard-focused,
      &.mat-checkbox-checked {
        background-color: transparent;
      }
    }
    //-------------------End No Label-----------------------------//

    .mdc-label {
      display: flex;
      flex-direction: column;
    }
  }
}
