// Base typography
html,
body {
  font-family: 'OpenSans', sans-serif !important;
}

// Typography size system
$font-sizes: (
  'xs': (
    size: 0.75rem,
    // 12px
    line-height: 1rem,
    // 16px
  ),
  'sm': (
    size: 0.875rem,
    // 14px
    line-height: 1.25rem,
    // 20px
  ),
  'base': (
    size: 1rem,
    // 16px
    line-height: 1.5rem,
    // 24px
  ),
  'lg': (
    size: 1.125rem,
    // 18px
    line-height: 1.75rem,
    // 28px
  ),
  'xl': (
    size: 1.25rem,
    // 20px
    line-height: 1.75rem,
    // 28px
  ),
  '2xl': (
    size: 1.5rem,
    // 24px
    line-height: 2rem,
    // 32px
  ),
  '3xl': (
    size: 1.875rem,
    // 30px
    line-height: 2.25rem,
    // 36px
  ),
  '4xl': (
    size: 2.25rem,
    // 36px
    line-height: 2.5rem,
    // 40px
  ),
  '5xl': (
    size: 3rem,
    // 48px
    line-height: 4rem,
    // 64px
  ),
);

$font-weights: (
  'light': 300,
  'normal': 400,
  'semibold': 600,
  'bold': 700,
);

// Typography utility mixins for use in other SCSS files
@mixin text-size($size-name) {
  $size-map: map-get($font-sizes, $size-name);
  @if $size-map {
    font-size: map-get($size-map, size);
    line-height: map-get($size-map, line-height);
  }
}

@mixin text-xs {
  @include text-size('xs');
}
@mixin text-sm {
  @include text-size('sm');
}
@mixin text-base {
  @include text-size('base');
}
@mixin text-lg {
  @include text-size('lg');
}
@mixin text-xl {
  @include text-size('xl');
}
@mixin text-2xl {
  @include text-size('2xl');
}
@mixin text-3xl {
  @include text-size('3xl');
}
@mixin text-4xl {
  @include text-size('4xl');
}
@mixin text-5xl {
  @include text-size('5xl');
}

// Generate utility classes for each font size
@each $size-name, $size-map in $font-sizes {
  .text-#{$size-name} {
    font-size: map-get($size-map, size);
    line-height: map-get($size-map, line-height);
    font-weight: map-get($font-weights, normal);
  }
}

// Generate utility classes for each font weight
@each $weight-name, $weight-value in $font-weights {
  .text-#{$weight-name} {
    font-weight: #{$weight-value} !important;
  }
}

// Text alignment, transform and color utility classes
$text-alignments: (
  'left': left,
  'center': center,
  'right': right,
  'justify': justify,
  'start': start,
  'end': end,
);

$text-colors: (
  'primary': var(--primary-color),
  'white': #fff,
  'error': #fa4d64,
);

$text-transformations: (
  'uppercase': uppercase,
  'lowercase': lowercase,
  'capitalize': capitalize,
);

@each $name, $value in $text-alignments {
  .text-#{$name} {
    text-align: #{$value} !important;
  }
}

@each $name, $value in $text-colors {
  .text-#{$name} {
    color: #{$value} !important;
  }
}

@each $name, $value in $text-transformations {
  .text-#{$name} {
    text-transform: #{$value} !important;
  }
}

.text-break {
  word-break: break-word;
}