@import '../colors';
@import '../mixins';
@import '../variables';
@import 'fonts';

.tix-font.v4 {
  @include font-base;
  color: $font-color-high-emphasis;

  // Font Sizes
  &.mobile {
    @at-root h1#{&} {
      @include font-size-h1;
    }
    @at-root h2#{&} {
      @include font-size-h2;
    }
    @at-root h3#{&} {
      @include font-size-h3;
    }
    @at-root small#{&} {
      @include font-size-small;
    }
    &.b1 {
      @include font-size-b1;
    }
    &.b2 {
      @include font-size-b2;
    }
    &.b3 {
      @include font-size-b3;
    }
  }
  &.desktop {
    @at-root h1#{&}.giga {
      @include font-size-giga-desktop;
    }
    @at-root h1#{&} {
      @include font-size-h1-desktop;
    }
    @at-root h2#{&} {
      @include font-size-h2-desktop;
    }
    @at-root h3#{&} {
      @include font-size-h3-desktop;
    }
    @at-root small#{&} {
      @include font-size-small-desktop;
    }
    &.b1 {
      @include font-size-b1-desktop;
    }
    &.b2 {
      @include font-size-b2-desktop;
    }
    &.b3 {
      @include font-size-b3-desktop;
    }
  }

  // Font Styles
  font-weight: $font-weight-regular;
  &.italic {
    font-style: italic;
  }
  &.bold {
    font-weight: $font-weight-bold;
  }
  &.small {
    font-weight: $font-weight-semibold;
  }

  // Font Colors
  &.activity {
    color: $font-color-activity;

    &.hover:hover {
      color: $color-B500;
    }
  }
  &.alert {
    color: $font-color-alert;
  }
  &.disabled {
    color: $font-color-disabled;
  }
  &.low-emphasis {
    color: $font-color-low-emphasis;
  }
  &.benefit {
    color: $font-color-benefit;
  }
  &.invert {
    color: $font-color-invert;
  }

  // Font Alignment
  &.center {
    text-align: center;
  }
  &.right {
    text-align: right;
  }

  /* OpenType features */

  // Superscript and Subscript
  sup,
  sub {
    // override default browser styles
    font-size: unset;
    vertical-align: unset;
  }

  sup {
    @include opentype-feature-superscript;
  }

  sub {
    @include opentype-feature-subscript;
  }

  // Fractions
  .of-frac {
    @include opentype-feature-fractions;
  }

  // Case Sensitive Forms
  .of-case {
    @include opentype-feature-case-sensitive-forms;
    text-transform: uppercase;
  }

  // Tabular Figures
  .of-tnum {
    @include opentype-feature-tabular-figures;
  }
}