@import "variables";
@import "../worko-mixins/mixins";

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

html, body {
  font-size: $fs-base;
  font-family: $ff-base;
  line-height: $lh-base;
  color: $fc-base;
}

p, li, label, input, td, th, span {
  color: $fc-base;
}

a {
  color: $lc-outer;
  cursor: pointer;
}

p a {
  color: $lc-base;
}

p {
  font-size: $fs-p;
  line-height: $lh-p;
  
  @each $item in $fs-p-breakpoints {
    @include mq(map-get($item, breakpoint)) {
      font-size: map-get($item, font-size);
      line-height: map-get($item, line-height);
    }
  }
}

h1, .h1 {
  font-size: $fs-h1;
  line-height: $lh-h1;
  font-family: $ff-h1;
  @each $item in $fs-h1-breakpoints {
    @include mq(map-get($item, breakpoint)) {
      font-size: map-get($item, font-size);
      line-height: map-get($item, line-height);
    }
  }
}

h2, .h2 {
  font-size: $fs-h2;
  line-height: $lh-h2;
  font-family: $ff-h2;
  @each $item in $fs-h2-breakpoints {
    @include mq(map-get($item, breakpoint)) {
      font-size: map-get($item, font-size);
      line-height: map-get($item, line-height);
    }
  }
}

h3, .h3 {
  font-size: $fs-h3;
  line-height: $lh-h3;
  font-family: $ff-h3;
  @each $item in $fs-h3-breakpoints {
    @include mq(map-get($item, breakpoint)) {
      font-size: map-get($item, font-size);
      line-height: map-get($item, line-height);
    }
  }
}

h4, .h4 {
  font-size: $fs-h4;
  line-height: $lh-h4;
  font-family: $ff-h4;
  @each $item in $fs-h4-breakpoints {
    @include mq(map-get($item, breakpoint)) {
      font-size: map-get($item, font-size);
      line-height: map-get($item, line-height);
    }
  }
}

h5, .h5 {
  font-size: $fs-h5;
  line-height: $lh-h5;
  font-family: $ff-h5;
  @each $item in $fs-h5-breakpoints {
    @include mq(map-get($item, breakpoint)) {
      font-size: map-get($item, font-size);
      line-height: map-get($item, line-height);
    }
  }
}

h6, .h6 {
  font-size: $fs-h6;
  line-height: $lh-h6;
  font-family: $ff-h6;
  @each $item in $fs-h6-breakpoints {
    @include mq(map-get($item, breakpoint)) {
      font-size: map-get($item, font-size);
      line-height: map-get($item, line-height);
    }
  }
}