@use 'sass:math';
@use '../../variables' as *;
@import '../../../src/styles/core';

$weights:
  'strong' 600,
  'light' 200;

.text {
  --font-size: 14px;
  --letter-spacing: 0;
  --line-height: 20px;
  --scale: 1;

  margin: 0;
  font-size: calc(var(--font-size) * var(--scale));
  font-weight: 400;
  font-style: normal;
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-optical-sizing: auto;

  &.base {
    --font-size: 14px;
    --letter-spacing: 0;
    --line-height: 20px;
  }

  &.micro {
    --font-size: 10px;
    --line-height: 16px;
    --letter-spacing: 0.0002em;
  }
  &.small {
    --font-size: 12px;
    --line-height: 16px;
    --letter-spacing: 0.0001em;
  }

  &.large {
    --font-size: 19px;
    --line-height: 32px;
    --letter-spacing: -0.0001em;
  }

  &.brandFont {
    font-family: $font-family-brand;
    font-variation-settings: var(--font-variation-settings-brand);
    --scale: #{math.div(15, 14)};
  }
}

.flex {
  flex: 1;
}

.overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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