// stylelint-disable selector-no-qualifying-type
strong,
b {
  font-weight: $font-bold;
}

pre,
code,
kbd,
samp {
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 0.75em;
}

code {
  padding: $space-xxs $space-xs;
  border: 1px solid $iron;
  background-color: $color-code;
  border-radius: $border-radius;
  margin-inline: 1px;
  @include moder($modes) {
    border: 1px solid mode("colorBorder");
    background-color: mode("colorCode");
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: $font-bold;
}

.gra-heading,
.gra-subheading {
  margin-bottom: $space-s;
  line-height: $line-height-s;
}

.gra-subheading {
  color: $color-font-secondary;
  font-weight: $font-normal;
  @include moder($modes) {
    color: mode("colorFontSecondary");
  }
}

h1 {
  font-size: $heading-1;
  letter-spacing: -0.15rem;
}

h2 {
  font-size: $heading-2;
  letter-spacing: -0.15rem;
}

h3 {
  font-size: $heading-3;
  letter-spacing: -0.1rem;
}

h4 {
  font-size: $heading-4;
  letter-spacing: -0.1rem;
}

h5 {
  font-size: $heading-5;
  letter-spacing: -0.05rem;
}

h6 {
  font-size: $heading-6;
  letter-spacing: -0.05rem;
}

a,
.gra-link {
  color: $color-link-font;
  cursor: pointer;
  font-weight: $font-thin;
  text-decoration: none;
  @include moder($modes) {
    color: mode("colorLinkFont");
  }

  &:hover,
  &:focus {
    color: $color-link-hover;
    outline: none;
    @include moder($modes) {
      color: mode("colorLinkHover");
    }
  }

  &:not(.disabled):not([disabled]):not(.gra-btn):not(.gra-nav-link):not(.gra-breadcrumb-link):hover {
    text-decoration: underline;
  }

  &.disabled,
  &[disabled] {
    color: $color-mute;
    cursor: not-allowed;
    opacity: 1;
    outline: none;
    user-select: none;
    @include moder($modes) {
      color: mode("colorMute");
    }
  }

  &.current {
    font-weight: $font-bold;

    &:hover {
      color: $color-link-font;
      @include moder($modes) {
        color: mode("colorLinkFont");
      }
    }
  }
}

p,
.gra-p {
  margin-bottom: $content-padding-block;
  font-size: $p-size;
}

.gra-p-small {
  margin-bottom: $space-s;
  font-size: $p-s-size;
  line-height: $line-height-m;
}

.gra-p-large {
  margin-bottom: $space-l;
  font-size: $p-l-size;
  line-height: $line-height-l;
}

.gra-text {
  &-secondary {
    color: $color-font-secondary;
    @include moder($modes) {
      color: mode("colorFontSecondary");
    }
  }

  &-yellow {
    color: $color-yellow;

    &-light {
      color: $color-yellow-light;
    }

    &-lighter {
      color: $color-yellow-lighter;
    }

    &-dark {
      color: $color-yellow-dark;
    }

    &-darker {
      color: $color-yellow-darker;
    }
  }

  &-red {
    color: $color-red;

    &-light {
      color: $color-red-light;
    }

    &-lighter {
      color: $color-red-lighter;
    }

    &-dark {
      color: $color-red-dark;
    }

    &-darker {
      color: $color-red-darker;
    }
  }

  &-green {
    color: $color-green;

    &-light {
      color: $color-green-light;
    }

    &-lighter {
      color: $color-green-lighter;
    }

    &-dark {
      color: $color-green-dark;
    }

    &-darker {
      color: $color-green-darker;
    }
  }

  &-blue {
    color: $color-blue;

    &-light {
      color: $color-blue-light;
    }

    &-lighter {
      color: $color-blue-lighter;
    }

    &-dark {
      color: $color-blue-dark;
    }

    &-darker {
      color: $color-blue-darker;
    }
  }

  &-muted {
    color: $color-mute;
    @include moder($modes) {
      color: mode("colorMute");
    }
  }

  &-marked {
    background-color: $color-mark;
  }
}