@use "./site-config";
@use "./colors";
@use "./heading-styles";
@use "./typography";
@use "s360-scss-toolkit";

%text-as-h1 {
  @extend %heading-as-h1;
}

%text-as-h2 {
  @extend %heading-as-h2;
}

%text-as-h3 {
  @extend %heading-as-h3;
}

%text-as-h4 {
  @extend %heading-as-h4;
}

%text-as-p {
  color: var(--p--color);
  display: var(--p--display, block);
  font-family: var(--p--font-family);
  font-size: var(--p--font-size);
  font-style: var(--p--font-style);
  font-weight: var(--p--font-weight);
  line-height: var(--p--line-height, #{ site-config.$text-line-height });
  margin: var(--p--margin, 0 0 1em 0);
  padding: var(--p--padding, 0);
  max-width: var(--p--max-width, #{ site-config.$max-line-length });

  &:last-of-type {
    margin-bottom: 0;
  }
}

%text-as-blockquote {
  --p--font-family: var(--blockquote--font-family);
  // --p--font-style: var(--blockquote--font-style);
  // --p--line-height: var(--blockquote--line-height);
  --p--font-size: var(--blockquote--font-size);
  // --p--font-weight: var(--blockquote--font-weight);

  margin: var(--blockquote--margin, 0);
  padding: var(--blockquote--padding, 0);
  position: relative;
}
