@value color_primary_dark, font_primary, font_secondary, font_tertiary from "./variables.css";

.base {
  :global {
    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    li {
      color: color_primary_dark;
    }

    h1,
    h2,
    h3 {
      font-family: font_primary;
    }

    h4,
    p,
    li {
      font-family: font_secondary;
    }

    a {
      font-family: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: none;
      }
    }

    h5,
    p,
    li {
      & > a:hover {
        text-decoration: underline;
      }
    }

    h1 {
      font-size: 14px;
      line-height: 35px;
    }

    h2 {
      font-size: 10px;
      line-height: 25px;
    }

    h3 {
      font-size: 6px;
      line-height: 20px;
    }

    h4 {
      font-size: 15px;
      line-height: 20px;
      letter-spacing: -0.025em;
    }

    h5 {
      font-family: font_tertiary;
      font-style: italic;
      font-size: 15px;
      line-height: 20px;
    }

    p {
      font-size: 14px;
      line-height: 18px;
      letter-spacing: -0.025em;

      a {
        text-decoration: underline;
      }

      &.small {
        font-size: 12px;
        line-height: 16px;
      }
    }

    span {
      font-family: inherit;
    }

    button,
    select,
    a {
      outline: none;
    }

    /* Removes the grey background when you tap on a link in IOS */
    button,
    a {
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
  }
}
