@import 'variables';

@mixin clearfix {
  zoom: 1;

  &:after {
    content: '.';
    display: block;
    clear: both;
    overflow: hidden;
    height: 0;
    visibility: hidden;
  }
}

@mixin ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
}

@mixin block-ellipsis($line: 2) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: $line;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

@mixin nowrap {
  white-space: nowrap;
  word-wrap: normal;
}

@mixin break-all {
  word-break: break-all;
  white-space: normal;
}

@mixin break-word {
  word-wrap: break-word;
  white-space: normal;
}

@mixin vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@mixin TypographyTitle($fontWeight: $font-bold) {
  font-family: $font-family-id;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  font-weight: $fontWeight;
}

@mixin TypographyTitleH1($color: $dark-color06) {
  font-size: 40px;
  line-height: 1.4;
  @include TypographyTitle();
  color: $color;
}

@mixin TypographyTitleH2($color: $dark-color06) {
  font-size: 32px;
  line-height: 1.38;
  @include TypographyTitle();
  color: $color;
}

@mixin TypographyTitleH3($color: $dark-color06) {
  font-size: 24px;
  line-height: 1.33;
  @include TypographyTitle();
  color: $color;
}

@mixin TypographyTitleH4($color: $dark-color06) {
  font-size: 20px;
  line-height: 1.4;
  @include TypographyTitle();
  color: $color;
}

@mixin TypographyTitleH5($color: $dark-color06) {
  font-size: 14px;
  line-height: 1.43;
  @include TypographyTitle(bold);
  color: $color;
}

@mixin TypographyTitleH6($color: $dark-color06) {
  font-size: $size-small;
  line-height: 1.67;
  @include TypographyTitle(bold);
  color: $color;
}

@mixin TypographySymbolText($color: $dark-color06) {
  font-family: $font-family;
  font-size: $size-small;
  font-weight: $font-bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: normal;
  color: $color;
}

@mixin TypographyParagraphCode($color: #363e4a) {
  font-family: 'Monaco', sans-serif;
  font-size: $size-small;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: normal;
  color: $color;
}

@mixin TypographyParagraph($color: $dark-color07) {
  font-family: $font-family-id;
  font-size: $size-small;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: normal;
  color: $color;
}
