@use "sass:map";
@use "src/styles/colors";
@use "src/styles/fonts";
@use "src/styles/screen";

$sizes: (
        "10": fonts.$font-size-xs,
        "12": fonts.$font-size-s,
        "14": fonts.$font-size-m,
        "16": fonts.$font-size-l,
        "18": fonts.$font-size-xl,
        "20": fonts.$font-size-xl1,
        "22": fonts.$font-size-xl2,
        "24": 24px,
        "26": fonts.$font-size-xl3,
        "30": fonts.$font-size-xxl,
        "36": fonts.$font-size-xxxl--tablet,
        "42": fonts.$font-size-xxxl,
);

$line-heights: (
        "10": 13px,
        "12": 16px,
        "14": 19px,
        "16": 21px,
        "18": 24px,
        "20": 26px,
        "22": 29px,
        "24": 31px,
        "26": 34px,
        "30": 39px,
        "36": 47px,
        "42": 55px,
);

$weights: (
        "light": fonts.$font-light,
        "regular": fonts.$font-regular,
        "medium": fonts.$font-medium,
        "bold": fonts.$font-bold,
);

$colors: (
        "default": colors.$text-color,
        "dark-blue": colors.$blue-dark,
        "blue": colors.$blue,
        "light-gray": colors.$light-gray,
        "light-blue": colors.$blue-light,
        "red": colors.$red,
        "orange": colors.$orange,
        "white": colors.$white,
);

// name from ITextAlign; text-align value; isMobile;
$aligns:
        "left" start false,
        "right" end false,
        "center" center false,
        "justify" justify false,
        "mobile-left" start true,
        "mobile-right" end true;

:host {
  font-size: 0;
}

.text {
  display: inline-block;

  font-size: fonts.$font-size-m;
  font-family: fonts.$font-family;
  font-weight: fonts.$font-regular;
  line-height: map.get($line-heights, "14");
  text-decoration: inherit;
  color: colors.$text-color;

  &--ellipsis {
    @include screen.desktop {
      @include fonts.font-overflow;

      max-width: 100%;
    }
  }
}

@each $name, $value in $sizes {
  .text--#{$name} {
    @include screen.gt-mobile {
      font-size: $value;
      line-height: map.get($line-heights, $name);
    }
  }

  .text--mobile-#{$name} {
    @include screen.mobile {
      font-size: $value;
      line-height: map.get($line-heights, $name);
    }
  }
}

@each $name, $value in $weights {
  .text--#{$name} {
    font-weight: $value;
  }

  .text--mobile-#{$name} {
    @include screen.mobile {
      font-weight: $value;
    }
  }
}

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

@each $name, $value, $isMobile in $aligns {
  .text--#{$name} {
    @if $isMobile {
      @include screen.mobile {
        text-align: $value;
      }
    } @else {
      text-align: $value;
    }
  }
}
