@use '../core/namespace' as *;
@use '../mixins/responsive-utility' as *;

:root {
  --max-lines: 2;
}

// === Text alignments ===
$text-alignments: (
  left: left,
  center: center,
  right: right,
  justify: justify
);

// === BASE CLASSES ===

// === Max lines ===
@include ns("max-lines") {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-clamp: var(--max-lines) !important;
  -webkit-line-clamp: var(--max-lines) !important;
}

// === Wrap anywhere with hyphens ===
@include ns("wrap-anywhere") {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

// === Ellipsis ===
@include ns("ellipsis") {
  display: inline !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

// === Text alignment ===
// Ex: .av-text-left / .av-text-center
@each $alignment, $value in $text-alignments {
  @include utility-base("text-#{$alignment}", (
    text-align: #{$value} !important
  ));
}

// === RESPONSIVE CLASSES ===

// === Responsive text alignment ===
// Ex: .av-text-left--md / .av-text-center--lg
@each $alignment, $value in $text-alignments {
  @include utility-responsive("text-#{$alignment}", (
    text-align: #{$value} !important
  ));
}

// === Text weight ===
// Ex: .av-text-bold / .av-text-light / .av-text-regular
@include ns("text-bold") {
  font-weight: var(--font-weight-bold) !important;
}

@include ns("text-light") {
  font-weight: var(--font-weight-light) !important;
}

@include ns("text-regular") {
  font-weight: var(--font-weight-regular) !important;
}