@use "./site-config";
@use "./animate-underline";
@use "./colors";
@use "./heading-styles";
@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(--color, inherit);
  display: var(--p--display, block);
  font-size: var(--p--font-size);
  font-style: var(--p--font-style);
  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;
  }

  &:has(code) {
    --p--max-width: none;
  }

  a {
    @extend %animate-underline-to-right;
  }
}

%text-style-blockquote {
  margin: var(--blockquote--margin, 0);
  padding: var(--blockquote--padding, 0);
  position: relative;
  text-indent: 4ch;
  quotes: "“" "”" "'" "'";

  p {
    --p--font-size: var(--blockquote--font-size, #{ s360-scss-toolkit.font-size-ms(2) });

    &::before {
      content: open-quote;
    }

    &::after {
      content: close-quote;
    }
  }
}

%text-style-intro-copy {
  font-size: s360-scss-toolkit.font-size-ms(2);
  font-weight: var(--intro-copy--font-weight);
}

%text-style-label {
  font-size: s360-scss-toolkit.font-size-ms(1);
  font-weight: var(--label--font-weight);
}

%text-style-small-copy {
  font-size: s360-scss-toolkit.font-size-ms(-1);
  font-weight: var(--small-copy--font-weight);
}

%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);
}
