@use '../settings' as s;

// scope all base (global) styles nested under .qppds selector
// this can help avoid conflicts between new qppds styles and legacy styles
.qppds,
.qpp-prose {
  // *:not() { // TODO: ignore component classes
  // Override legacy qpp-style label styles
  // TODO: reevaluate this when we get to forms and fieldsets
  label {
    @include s.input-label;
  }

  @for $i from 1 through length(s.$headings) {
    $heading: nth(s.$headings, $i);

    h#{$i},
    .h#{$i} {
      @include s.heading($heading);
    }
  }

  p,
  .p1 {
    @include s.p1;
  }

  .p2 {
    @include s.p2;
  }

  .l1 {
    @include s.l1;
  }

  .l2 {
    @include s.l2;
  }
  //}
}

// prefixed, single-use global classes for typography styles that can
// be used outside a .qppds wrapper.
.qpp-label {
  @include s.input-label;
}

.qpp-legend {
  @include s.input-label;
  margin-top: s.$spacing-8;
  // override legacy globals for legend
  margin-bottom: 0;
  border: 0;
  border-bottom: 0;
  padding: 0;
  line-height: inherit;
  width: auto;
}

@for $i from 1 through length(s.$headings) {
  $heading: nth(s.$headings, $i);

  .qpp-h#{$i} {
    @include s.heading($heading);
  }
}

.qpp-p,
.qpp-p1 {
  @include s.p1;
}

.qpp-p2 {
  @include s.p2;
}

.qpp-l1 {
  @include s.l1;
}

.qpp-l2 {
  @include s.l2;
}

.qpp-error-message {
  color: s.$red-50;
  display: block;
  font-size: s.$font-size-14;
  font-weight: 400;
}

.qpp-hint-message {
  color: s.$gray-60;
  display: block;
  font-size: s.$font-size-14;
  font-weight: 400;
}