@import '../config/variables';

// Body fonts

@mixin Heading1 {
  font-size: $--h1-font-size;
  line-height: $--h1-line-height;
  font-weight: $--h1-font-weight;
  letter-spacing: $--h1-letter-spacing;
  margin: $--h1-margin;
  color: $--color-text;
  overflow-wrap: break-word;
  @media (min-width: $--screen-lg) {
    font-size: $--h1-font-size-large;
    line-height: $--h1-line-height-large;
  }
}

@mixin Heading2 {
  font-size: $--h2-font-size;
  line-height: $--h2-line-height;
  font-weight: $--h2-font-weight;
  letter-spacing: $--h2-letter-spacing;
  margin: $--h2-margin;
  color: $--color-text;
  overflow-wrap: break-word;
  @media (min-width: $--screen-lg) {
    font-size: $--h2-font-size-large;
    line-height: $--h2-line-height-large;
  }
}

@mixin Heading3 {
  font-size: $--h3-font-size;
  line-height: $--h3-line-height;
  font-weight: $--h3-font-weight;
  letter-spacing: $--h3-letter-spacing;
  margin: $--h3-margin;
  color: $--color-text;
  overflow-wrap: break-word;
  @media (min-width: $--screen-lg) {
    font-size: $--h3-font-size-large;
    line-height: $--h3-line-height-large;
  }
}

@mixin Heading4 {
  font-size: $--h4-font-size;
  line-height: $--h4-line-height;
  font-weight: $--h4-font-weight;
  letter-spacing: $--h4-letter-spacing;
  margin: $--h4-margin;
  color: $--color-text;
  overflow-wrap: break-word;
  @media (min-width: $--screen-lg) {
    font-size: $--h4-font-size-large;
    line-height: $--h4-line-height-large;
  }
}

@mixin defaultLink {
  color: $--color-primary;
  &:hover, &:focus {
    opacity: 0.7;
    color: $--color-primary;
  }
  &:active {
    opacity: 1;
    color: $--color-dark;
  }
}

@mixin greyLink {
  color: $--color-grey;
  &:hover, &:focus {
    opacity: 0.7;
    color: $--color-grey;
  }
  &:active {
    opacity: 1;
    color: $--color-text;
  }
}

@mixin defaultMenuLink {
  color: $--color-primary;
  &:hover {
    opacity: 0.7;
    color: $--color-primary;
  }
  &:focus {
    opacity: 1;
    color: $--color-focus;
  }
  &:active {
    opacity: 1;
    color: $--color-dark;
  }
}

@mixin greyMenuLink {
  color: $--color-text;
  opacity: 0.5;
  &:hover {
    opacity: 0.3;
    color: $--color-text;
  }
  &:focus {
    opacity: 1;
    color: $--color-focus;
  }
  &:active {
    opacity: 1;
    color: $--color-dark;
  }
}

@mixin priceBig {
  font-size: $--price-big-font-size;
  line-height: $--price-big-line-height;
  font-weight: $--price-big-font-weight;
  letter-spacing: $--price-big-letter-spacing;
}

@mixin priceSmall {
  font-size: $--price-small-font-size;
  line-height: $--price-small-line-height;
  font-weight: $--price-small-font-weight;
  letter-spacing: $--price-small-letter-spacing;
}

@mixin bodyX {
  font-size: $--body-x-font-size;
  line-height: $--body-x-line-height;
  font-weight: $--body-x-font-weight;
  letter-spacing: $--body-x-letter-spacing;
}

@mixin bodyL {
  font-size: $--body-l-font-size;
  line-height: $--body-l-line-height;
  font-weight: $--body-l-font-weight;
  letter-spacing: $--body-l-letter-spacing;
}

@mixin bodyS {
  font-size: $--body-s-font-size;
  line-height: $--body-s-line-height;
  font-weight: $--body-s-font-weight;
  letter-spacing: $--body-s-letter-spacing;
}

@mixin bodyXS {
  font-size: $--body-xs-font-size;
  line-height: $--body-xs-line-height;
  font-weight: $--body-xs-font-weight;
  letter-spacing: $--body-xs-letter-spacing;
}