@use '../../../style/color/index.scss' as *;
@use '../../../style/utils/text/index.scss' as *;

$font-sizes: (
  lg: 16px,
  md: 14px,
  sm: 12px,
  xs: 10px,
);

.ver-text {
  align-self: center;
  margin: 0;
  padding: 0;
  color: #606266;
  word-break: break-all;

  .dark & {
    color: $ver-zinc-1;
  }
}

@include text-color('primary', $ver-violet-6);
@include text-color('success', $ver-green-6);
@include text-color('info', $ver-zinc-6);
@include text-color('warning', $ver-orange-6);
@include text-color('error', $ver-red-6);

@each $size, $font-size in $font-sizes {
  .ver-text.is-#{$size} {
    font-size: $font-size;
  }
}

.ver-text.is-truncated {
  display: inline-block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
