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

%text-style-h1 {
  @extend %heading-style-h1;
  @extend %heading-style-base;
}

%text-style-h2 {
  @extend %heading-style-h2;
  @extend %heading-style-base;
}

%text-style-h3 {
  @extend %heading-style-h3;
  @extend %heading-style-base;
}

%text-style-h4 {
  @extend %heading-style-h4;
  @extend %heading-style-base;
}

%text-style-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;
  }

  a {
    @extend %animate-text-decoration-underline-up;
  }
}

%text-style-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;
}

%text-style-caption {
  --p--font-family: var(--caption--font-family, inherit);
  --p--font-size: var(--caption--font-size, #{ s360-scss-toolkit.font-size-ms(0) });
  --p--margin: var(--caption--margin, 0.5em 0 0 0);
  --p--padding: var(--caption--padding);
}
