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

// RADIO STYLES
.mat-mdc-radio-button {
  &.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 radio that may no longer apply for the MDC version.*/
    .mat-radio-container {
      margin-right: 19px;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    &:hover:not(.mdc-radio--disabled) {
      background-color: black(0.08);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    &:active:not(.mdc-radio--disabled) {
      background-color: black(0.12);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    &:not(.mdc-radio--disabled).cdk-keyboard-focused {
      background-color: black(0.08);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    .mat-radio-label-content {
      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);
    }
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    &.mdc-radio--disabled:not(.mat-mdc-radio-checked) {
      /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
      .mdc-radio__outer-circle {
        background: theme-apply($primary-dark-2-disable-background);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    &.mdc-radio--disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
      .mdc-radio__inner-circle {
        background-color: theme-apply($primary-dark-1-disable-background);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
      .mdc-radio__outer-circle {
        border-color: theme-apply(
          $primary-dark-1-disable-background
        ) !important;
        background-color: theme-apply($primary-dark-2-disable-background);
      }
    }

    &.error-form {
      /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
      .mdc-radio__outer-circle {
        border: 2px solid theme-apply($error);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
    &.mat-mdc-radio-checked {
      background: theme-apply($primary-light-12-opacity);

      &.cdk-keyboard-focused {
        &:not(.ng-invalid) {
          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.*/
      &: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 radio that may no longer apply for the MDC version.*/
      .mat-radio-container {
        margin-right: 19px;
      }

      .mat-ripple-element {
        background-color: theme-apply($primary-circle-background-hover);
      }

      .mdc-radio__native-control:enabled
        + .mdc-radio__background
        .mdc-radio__outer-circle {
        border-color: theme-apply($primary);
      }

      .mdc-radio__native-control:enabled
        + .mdc-radio__background
        .mdc-radio__inner-circle {
        border-color: theme-apply($primary);
      }
    }

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

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