@import "./variables";

@each $type, $value in $typography {
  .cds-text-#{$type} {
    @each $name, $val in $value {
      @if $name == 'size' {
        font-size: $val !important;
      } @else if $name == 'height' {
        line-height: $val !important;
      } @else if $name == 'weight' {
        font-weight: $val !important;
      }
    }
    font-family: var(--cds-font-family) !important;
  }
}

@each $breakpoint, $map in $grid-breakpoints {
  $breakpoint-width: map-get($map, 'width');

  @media (min-width: $breakpoint-width) {
    @each $type, $value in $typography {
      .#{$breakpoint}\:cds-text-#{$type} {
        @each $name, $val in $value {
          @if $name == 'size' {
            font-size: $val !important;
          } @else if $name == 'height' {
            line-height: $val !important;
          } @else if $name == 'weight' {
            font-weight: $val !important;
          }
        }
        font-family: var(--cds-font-family-sans) !important;
      }
    }
  }
}

@each $key, $value in $typography-properties {
  $prefix: map-get($value, 'name');
  $propertyMap: map-get($value, 'map');
  $cssProperty: map-get($value, 'property');

  // Без брейкпоинтов
  @each $name, $propValue in $propertyMap {
    .cds-#{$prefix}#{$name} {
      #{$cssProperty}: $propValue !important;
    }
  }

  // Брейкпоинты
  @each $breakpoint, $map in $grid-breakpoints {
    $width: map-get($map, 'width');

    @media (min-width: $width) {
      @each $name, $propValue in $propertyMap {
        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
          #{$cssProperty}: $propValue !important;
        }
      }
    }
  }
}
