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

:host {
  display: block;
}

// General styles for text paragraph
.hy-paragraph-text {
  @include font-size(15px, 22px); // Paragraph Small size
  color: var(--grayscale-dark-text);
  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) {
    @include font-size(17px, 26px); // Paragraph Large size
    width: 82.89%; // 10 col
  }

  &__large {
    @include breakpoint($extrawide) {
      @include font-size(17px, 26px); // Paragraph Large size
      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;
    display: inline-flex;

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

    &:hover {
      color: var(--brand-main);
    }
  }

  a[target='_blank']:after {
    display: block;
    content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
    margin-left: 3px;
    transform: rotate(315deg);

    &:hover {
      content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
    }
  }

  a[target='_blank']:hover {
    &:after {
      content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
    }
  }

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

    &:last-of-type {
      margin-bottom: 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;
  }
}