@use "design";

strong,
b {
  font-weight: design.$weight-display-bold;
}

.title1 {
  @include design.fontH1;
}

.title2 {
  @include design.fontH2;
}

.title3 {
  @include design.fontH3;
}

.title4 {
  @include design.fontH4;
}

.title5 {
  @include design.fontH5;
}

.title6 {
  @include design.fontH6;
}

// Prose!

.prose {
  &.small {
    @include design.font-smaller;
  }

  // Approximate the structure of `Vertical`. This is cool, because it allows other
  // components (like `Callout` or `VerticalTimeline`) to be correctly spaced.
  > *:not(:first-child) {
    margin-top: design.$space-125;
  }

  // Just pull in the heading styling from the rest of the app for now

  h1 {
    @include design.fontH1;
  }

  h2 {
    @include design.fontH2;
  }

  h3 {
    @include design.fontH3;
  }

  h4 {
    @include design.fontH4;
  }

  h5 {
    @include design.fontH5;
  }

  h6 {
    @include design.fontH6;
  }

  // Links

  a {
    color: design.$neutral-10;

    // text-decoration: underline;
    border-bottom: 2px solid design.$neutral-80;

    &:hover {
      border-bottom: 2px solid design.$neutral-70;
    }

    &:active {
      border-bottom: 2px solid design.$neutral-50;
    }
  }

  // Lists

  ul,
  ol {
    > *:not(:first-child) {
      margin-top: design.$space-75;
    }
  }

  ol {
    list-style-type: decimal;
    list-style-position: inside;
  }

  ul {
    margin-left: design.$space-100;
    list-style-type: disc;

    li {
      padding-left: design.$space-25;
      &::marker {
        // color: design.$text-grey;
      }
    }
  }

  code {
    font-family: design.$font-monospace;
    color: design.$peach-50;
  }

  blockquote {
    border-left: 1px solid design.$card-border-color;
    margin: design.$space-50;
    padding-left: design.$space-100;
  }
}

hr {
  border-top: 1px solid design.$card-border-color;
}

.legalProseStandaloneLink {
  @include design.font-smallest;
  margin-bottom: 0.5rem;
}

.legalProse {
  @include design.font-smallest;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: design.$weight-display-bold;
  }

  b {
    font-weight: design.$weight-display-bold;
    text-decoration: underline;
    font-style: italic;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  dl,
  ol,
  ul,
  p,
  img,
  section,
  hr {
    + h1,
    + h2,
    + h3,
    + h4,
    + h5,
    + h6,
    + dl,
    + ol,
    + ul,
    + p,
    + img,
    + section,
    + hr {
      margin-top: 0.5rem;
    }
  }

  dl {
    > div + div {
      margin-top: 0.5rem;
    }

    dt,
    dd {
      display: inline;
    }

    dd {
      margin-left: 0.25em;
      font-style: italic;
    }
  }

  ol {
    list-style-type: decimal;
    list-style-position: inside;

    ol {
      list-style-type: lower-alpha;
    }
  }

  ul {
    list-style-type: disc;
    list-style-position: inside;
  }

  ol,
  ul {
    ol,
    ul {
      margin-top: 0.25rem;
      margin-left: 0.5rem;
    }
  }

  li {
    h2,
    h3 {
      display: inline;
      font-weight: design.$weight-display-bold;
    }

    + li {
      margin-top: 0.5rem;
    }
  }

  a {
    text-decoration: underline;
  }

  hr {
    // HACK: override <Card> stuff.
    border: 0 !important;
    text-align: center;

    &::after {
      content: "*****";
    }
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}