@use "scss/colors";
@use "scss/variables";

.text {
  margin: 0;
  padding: 0;
  font-weight: 400;
  line-height: 1.2;

  &.inverse {
    color: colors.$foreground;
  }
}

.xs {
  font-size: 11px;
}

.sm {
  font-size: variables.$font-size-sm;
}

.md {
  font-size: variables.$font-size-md;
}

.lg {
  font-size: variables.$font-size-lg;
}

.darkBlue {
  color: colors.$dark-blue;
}

.blue {
  color: colors.$blue;
}

.grey {
  color: colors.$grey-400;
}

.grey300 {
  color: colors.$grey-300;
}

.grey400 {
  color: colors.$grey-400;
}

.grey500 {
  color: colors.$grey-500;
}

.grey600 {
  color: colors.$grey-600;
}

.green {
  color: colors.$green;
}

.green600 {
  color: colors.$green-600;
}

.red {
  color: colors.$red;
}

.red200 {
  color: colors.$red-200;
}

.red400 {
  color: colors.$red-400;
}

.yellow600 {
  color: colors.$yellow-600;
}

.bold,
.text > strong {
  font-weight: 600;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.gradient {
  background-image: linear-gradient(to right, colors.$blue-400, colors.$orange-300);

  // disable no-vendor-prefix check, because without -webkit-background-clip, the text gradient is not properly rendered in Chrome
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.italicized {
  font-style: italic;
}

.smallcaps {
  text-transform: lowercase;
  font-variant: small-caps;
}
