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

// RADIO STYLES
.mat-radio-group.ng-invalid {
  .mat-radio-button {
    &.qms-group-options {
      &:not(.mat-radio-disabled).cdk-keyboard-focused,
      &:not(.mat-radio-disabled).cdk-program-focused {
        .mat-radio-persistent-ripple {
          opacity: 1;
          // border: 2px solid $secondary;
          background: black(0.08);
        }
      }
    }
  }
}

.mat-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;

    .mat-radio-container {
      margin-right: 19px;

      &:hover {
        .mat-ripple-element {
          opacity: 0.08;
          background-color: black;
        }
      }
    }

    &.mat-radio-disabled .mat-radio-container {
      &:hover {
        .mat-radio-persistent-ripple {
          opacity: 0;
        }
      }
    }

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

    div.mat-ripple-element {
      opacity: 0 !important;
    }

    .mat-radio-label-content {
      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;
    }

    &:not(.mat-radio-disabled).cdk-keyboard-focused {
      .mat-radio-persistent-ripple {
        opacity: 1;
        // border: 2px solid $primary;
        background: black(0.08);
      }
    }

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

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

    &.error-form {
      .mat-radio-outer-circle {
        border: 2px solid $error;
      }
    }

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

      .mat-radio-container {
        margin-right: 19px;

        &:active {
          span.mat-radio-persistent-ripple {
            opacity: 1;
            background-color: $secondary-light-12-opacity;
            transition-duration: 150ms;
          }       
        }
        &:hover {
          .mat-ripple-element {
            opacity: 1;
            background-color: $secondary-light-6-opacity;
          }
        }
      }
    }

    &.mat-radio-checked {
      .mat-radio-outer-circle {
        border-color: $secondary;
      }
    }

    .mat-radio-inner-circle {
      background-color: $secondary;
    }

    &.mat-radio-checked .mat-radio-persistent-ripple {
      background-color: $secondary-light-6-opacity;
    }

    .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple) {
      background-color: black;
    }

    &.mat-radio-checked
      .mat-radio-ripple
      .mat-ripple-element:not(.mat-radio-persistent-ripple) {
      background-color: $secondary;
    }
  }
}
