@import './paragraph-text-content.scss';
@import './paragraph-text-landing.scss';

:host {
  display: block;
}

// General styles for text paragraph
.hy-paragraph-text {
  @include font-size(14px, 20px); // Paragraph Small size
  color: var(--grayscale-dark);
  font-family: var(--main-font-family);
  letter-spacing: 0;
  width: 100%;

  @include breakpoint($narrow) {
    @include font-size(16px, 24px); // Paragraph Medium size
  }
  @include breakpoint($wide) {
    width: 91.46%; // 11 col
  }
  @include breakpoint($xlarge) {
    width: 82.89%; // 10 col
  }

  &__large {
    @include breakpoint($extrawide) {
      width: 82.89%; // 10 col
    }
    @include breakpoint($xlarge) {
      width: 74.17%; // 9 col
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--grayscale-black);
    font-family: var(--main-font-family);
    font-weight: 700;
    margin: 0;
    width: 100%;

    &.negative {
      color: var(--grayscale-white);
    }
  }

  // link within paragraph (Open sans semibold)
  a {
    @include font-size(14px, 20px); // Paragraph Small size
    color: var(--link-blue);
    font-family: var(--main-font-family);
    font-weight: 600;

    @include breakpoint($narrow) {
      @include font-size(16px, 24px);
      letter-spacing: -0.1px;
    }
  }

  p {
    margin-top: 0;
    padding-top: 0;
  }

  // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.
  &:first-child {
    margin-top: 0 !important;
  }
}