@use "vars";
@use "mixins";

html,
body {
  font-family: var(--font-regular);
  letter-spacing: var(--letter-space-1);
  color: var(--dark);
}

a {
  color: var(--jambonz);
  text-decoration: none;
  transition: color var(--base-dur) var(--base-ease);
}

strong {
  @include mixins.font-bold();
}

em {
  font-family: var(--font-regular-italic);
}

/*
 * Buttons have their own inline svg/span styles
 * This className lets us inline a flat icon with text
 */
.i {
  em,
  svg,
  span,
  strong {
    display: inline;
    vertical-align: middle;
  }

  svg:last-child {
    margin-left: var(--px01);
  }

  svg:first-child {
    margin-right: var(--px01);
  }

  /*
   * Using React Feather
   * https://github.com/feathericons/react-feather
   * Default size is 24x24 for SVG icons
   * Sizing can be passed in component JS as in:
   * <Icon size={18}><GitHub /></Icon>
   * However the inline, in-text SVG icons need to be
   *    responsive with the text scaling so some CSS
   *    can achieve the desired result in this case:
   *    e.g. <span>text</span><Icons.ExternalLink />
   *
   */
  svg {
    @media (max-width: vars.$width-tablet-1) {
      width: var(--svg01);
      height: var(--svg01);
    }

    @media (max-width: vars.$width-tablet-2) {
      width: var(--svg00);
      height: var(--svg00);
    }
  }
}

.h1,
h1 {
  @include mixins.h1();
}

.h2,
h2 {
  @include mixins.h2();
}

.h3,
h3 {
  @include mixins.h3();
}

.h4,
h4 {
  @include mixins.h4();
}

.h5,
h5 {
  @include mixins.h5();
}

.h6,
h6 {
  @include mixins.h6();
}

.p,
p {
  @include mixins.p();
}

.m {
  @include mixins.m();
}

.ms {
  @include mixins.ms();
}

.mxs {
  @include mixins.mxs();
}

.m,
.ms,
.mxs,
.p,
p,
.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
  span {
    color: var(--jambonz);
  }
}

.med {
  @include mixins.font-medium();
}

.txt--dark {
  color: var(--dark);
}

.txt--jam {
  color: var(--jambonz);
}

.txt--teal {
  color: var(--teal);
}

.txt--blue {
  color: var(--blue);
}

.txt--purple {
  color: var(--purple);
}

.txt--white {
  color: var(--white);
}

.txt--red {
  color: var(--red);
}

.txt--green {
  color: var(--green);
}

.txt--grey {
  color: var(--grey);
}