@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

// Primary

.c-utility-body--primary__text {
  @include font-gm-sans;
  @include css-variables("font-size", 16);
  letter-spacing: rem(0.5);
  line-height: line-height(16, 19);
  color: $color-grey-900;
}
.c-utility-body--primary__link {
  text-decoration: none;
  color: $color-grey-900;
  border-bottom: 1px solid $color-grey-900;
  &:visited {
    color: $color-grey-660;
    border-bottom: 1px solid $color-grey-660;
  }
  &:hover,
  &:focus {
    color: $color-grey-500;
    border-bottom: 1px solid $color-grey-500;
  }
  &:active {
    color: $color-grey-660;
    border-bottom: 1px solid $color-grey-660;
  }
}

// Secondary

.c-utility-body--secondary__text,
.c-utility-body--secondary__link {
  font-family: $font-utility-stack;
  font-size: rem(14);
  line-height: line-height(14, 18);
  color: $color-grey-800;
}
.c-utility-body--secondary__link {
  &:visited {
    color: $color-grey-800;
  }
  &:hover,
  &:focus {
    color: $color-grey-660;
  }
  &:active {
    color: $color-grey-800;
  }
}

// Mice type

.c-utility-body--micetype__text,
.c-utility-body--micetype__link {
  font-family: $font-utility-stack;
  font-size: rem(12);
  line-height: line-height(12, 15);
  color: $color-grey-660;
}
.c-utility-body--micetype__link {
  &:visited {
    color: $color-grey-660;
  }
  &:hover,
  &:focus {
    color: $color-grey-900;
  }
  &:active {
    color: $color-grey-660;
  }
}
