@use "sass:map";

.vuiTitle {
  color: $colorText;
  margin-bottom: 0;
}

$size: (
  xxs: (
    size: $fontSizeSmall,
    line-height: 1.4,
    weight: $fontWeightBold,
    color: $colorText
  ),
  xs: (
    size: $labelFontSize,
    line-height: 1.4,
    weight: $labelFontWeight,
    color: $labelColor
  ),
  s: (
    size: $fontSizeLarge,
    line-height: 1.3,
    weight: $fontWeightBold,
    color: $colorText
  ),
  m: (
    size: $fontSizeXLarge,
    weight: $fontWeightHeavy,
    line-height: 1.2,
    color: $colorText
  ),
  l: (
    size: $fontSizeXxLarge,
    weight: $fontWeightHeavy,
    line-height: 1.1,
    color: $colorText
  ),
  xl: (
    size: $fontSizeXxxLarge,
    weight: $fontWeightBold,
    line-height: 1,
    color: $colorText
  ),
  xxl: (
    size: $fontSizeXxxLarge,
    line-height: 1,
    weight: $fontWeightHeavy,
    color: $colorText
  )
);

@each $sizeName, $sizeValue in $size {
  .vuiTitle--#{$sizeName} {
    font-size: #{map.get($sizeValue, "size")};
    line-height: #{map.get($sizeValue, "line-height")};
    font-weight: #{map.get($sizeValue, "weight")};
    color: #{map.get($sizeValue, "color")};
  }
}

$align: left, center, right;

@each $alignValue in $align {
  .vuiTitle--#{$alignValue} {
    text-align: #{$alignValue};
  }
}