@import '../../global';
@import '../../mixins/queries';
@import '../../mixins/typography';

.typography {
  @include body;

  margin: 0px;

  &_title {
    @include action;

    margin-bottom: $push_lg;

    &__level_1 {
      font-size: $heading-size-1;
      line-height: $heading-size-1 + 4px;

      margin-bottom: $push_lg * 3;
    }

    &__level_2 {
      font-size: $heading-size-2;
      line-height: $heading-size-2 + 4px;

      margin-bottom: $push_lg;
    }

    &__level_3 {
      font-size: $heading-size-3;
      line-height: $heading-size-3 + 4px;
      margin-bottom: $push;
    }

    &__level_4 {
      font-size: $heading-size-4;
      line-height: $heading-size-4 + 4px;
      margin-bottom: $push;
    }

    &__level_5 {
      font-size: $heading-size-5;
      line-height: $heading-size-5 + 4px;
      margin-bottom: $push-sm;
    }

    @include sm {
      &__level_1 {
        font-size: $heading-size-1 - 6px;
        line-height: ($heading-size-1 + 4px) - 10px;

        margin-bottom: $push_lg * 2;
      }

      &__level_2 {
        font-size: $heading-size-2 - 6px;
        line-height: ($heading-size-2 + 4px) - 10px;

        margin-bottom: $push_lg;
      }
    }
  }

  &_paragraph {
    display: block;

    margin-bottom: $push;

    &__ellipses {
      margin-left: $push-sm;
    }
  }

  &_text {
    display: inline-block;

    &__danger {
      color: color('danger');
    }

    &__warning {
      color: color('warning');
    }

    &__success {
      color: color('success');
    }

    &__link {
      color: color('primary');
      cursor: pointer;
    }

    &__push {
      display: block;
      margin-bottom: $push_sm;
    }
  }

  &__underline {
    text-decoration: underline;
  }

  &__mark {
    background-color: color('warning');
  }

  &__bold {
    font-weight: 700;
  }

  &__inverse {
    color: color('white') !important;
  }

  &__small {
    @include small;
  }
}