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

:import {
  -st-from: "../../formatters/calcLineHeight";
  -st-default: calcLineHeight;
}

:import {
  -st-from: "../../formatters/calcRemFromPixel";
  -st-default: calcRemFromPixel;
}

/* = 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,
    --suk-magenta;
}

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

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

  /* Variants */
  Text:variant(title1) {
    color: #ffffff;
    font-family: var(--font-family-title);
    font-size: calcRemFromPixel(28);
    line-height: calcLineHeight(28, 40);
    word-wrap: break-word;
    position: relative;
    margin: 0.6em 0 1.2222em;
    font-weight: 700;
    background-color: var(--suk-magenta);
    padding: 16px;
  }

  Text:variant(title1)::before {
    display: none;
  }

  Text:variant(title2) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: calcRemFromPixel(24);
    line-height: calcLineHeight(24, 36);
    font-weight: 700;
  }

  Text:variant(title3) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: calcRemFromPixel(22);
    line-height: calcLineHeight(22, 32);
    font-weight: 700;
  }

  Text:variant(title4) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: calcRemFromPixel(20);
    line-height: calcLineHeight(20, 28);
    font-weight: 700;
  }

  Text:variant(title5) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: calcRemFromPixel(18);
    line-height: calcLineHeight(18, 26);
    font-weight: 700;
  }

  Text:variant(title6) {
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-size: calcRemFromPixel(16);
    line-height: calcLineHeight(16, 24);
    font-weight: 700;
  }

  Text:variant(body) {
    font-size: calcRemFromPixel(16);
    line-height: calcLineHeight(16, 24);
  }

  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: calcRemFromPixel(48);
      line-height: calcLineHeight(48, 64);
      font-weight: 700;
      word-wrap: normal;
      margin: 0.6em 0 1.3333em;
      color: #ffffff;
      background-color: var(--suk-magenta);
      padding: 16px;
    }

    Text:variant(title2) {
      font-size: calcRemFromPixel(38);
      line-height: calcLineHeight(38, 52);
      font-weight: 700;
    }

    Text:variant(title3) {
      font-size: calcRemFromPixel(32);
      line-height: calcLineHeight(32, 44);
      font-weight: 700;
    }

    Text:variant(title4) {
      font-size: calcRemFromPixel(28);
      line-height: calcLineHeight(28, 36);
      font-weight: 700;
    }

    Text:variant(title5) {
      font-size: calcRemFromPixel(24);
      line-height: calcLineHeight(24, 32);
      font-weight: 700;
    }

    Text:variant(title6) {
      font-size: calcRemFromPixel(20);
      line-height: calcLineHeight(20, 28);
      font-weight: 700;
    }

    Text:variant(body) {
      font-size: calcRemFromPixel(16);
      line-height: calcLineHeight(16, 24);
    }

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

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

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