/* text.st.css */
@namespace "Text";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    laptop,
    tablet,
    --font-family-base,
    --color-heading,
    --color-hint,
    --font-family-title;
}

/* Import style API */
:import {
  -st-from: "../../components/Text/text.st.css";
  -st-default: Text;
}

@st-scope Base {
  Text {
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    color: var(--color-hint);
    font-family: var(--font-family-base);
  }

  /* Variants */
  Text:variant(title1) {
    color: var(--color-heading);
    font-family: var(--font-family-title);
    font-size: 2rem;
    line-height: 1.3;
    word-wrap: break-word;
    position: relative;
    margin: 0.6em 0 1.2222em;
  }

  Text:variant(title1)::before {
    position: absolute;
    left: 0;
    bottom: -0.65em;
    content: "";
    background-color: var(--color-heading);
    width: 45px;
    height: 4px;
    border-radius: 4px;
  }

  Text:variant(title2) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 700;
  }

  Text:variant(title3) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
  }

  Text:variant(title4) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
  }

  Text:variant(title5) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 700;
  }

  Text:variant(title6) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: .875rem;
    line-height: 1.3;
    font-weight: 700;
  }

  Text:variant(body) {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
  }

  Text:variant(input) {
    color: var(--color-hint);
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
  }

  Text:variant(caption) {
    color: var(--color-hint);
    font-size: 0.875rem;
    line-height: 1.35;
    letter-spacing: -0.025rem;
    font-weight: 700;
  }

  Text:variant(small) {
    color: var(--color-hint);
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* Equates to blockquote.TextXXX__root which is handy... */
  :global(blockquote)Text {
    color: var(--color-hint);
  }

  /* Extras */
  Text:uppercase {
    text-transform: uppercase;
  }

  Text:underline {
    text-decoration: underline;
  }

  Text:bold {
    color: var(--color-hint);
    font-weight: 600;
  }
}

/** Medium devices (tablets, 950px and up) */
@media value(tablet) {
  @st-scope Base {
    Text:variant(title1) {
      font-size: 3rem;
      word-wrap: normal;
      margin: 0.6em 0 1.3333em;
    }

    Text:variant(title2) {
      font-size: 2.5rem;
    }

    Text:variant(title3) {
      font-size: 2rem;
    }

    Text:variant(title4) {
      font-size: 1.5rem;
    }

    Text:variant(title5) {
      font-size: 1.25rem;
    }

    Text:variant(title6) {
      font-size: 1rem;
    }

    Text:variant(body) {
      font-size: 1.125rem;
    }

    Text:variant(input) {
      font-size: 1rem;
    }

    Text:variant(caption) {
      font-size: 1rem;
    }

    Text:variant(small) {
      font-size: 0.875rem;
    }
  }
}