@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(text) {
  @include set-component-css-var('text', $text);
}

@include b(text) {
  align-self: center;
  margin: 0;
  padding: 0;
  font-size: getCssVar('text', 'font-size');
  color: getCssVar('text', 'color');
  overflow-wrap: break-word;

  @include when(truncated) {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  @include when(line-clamp) {
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  // TODO: FormText'ı bu şekilde değiştirdim kontrol et: @each $size in (large, default, small) {
  // @each $size in (large, default, small) {
  @each $size in $sizes {
    @include m($size) {
      @include set-css-var-value(('text', 'font-size'), map.get($text-font-size, $size));
    }
  }

  @each $type in $types {
    &.#{bem('text', '', $type)} {
      @include css-var-from-global(('text', 'color'), ('color', $type));
    }
  }

  & > .#{bem('icon')} {
    vertical-align: -2px;
  }
}

mark {
  &.el-text {
    border: 1px solid #eaea0d;
    border-radius: 4px;
    padding: 0 4px;
  }
}