// ********************************************
// container definition
$el-container: #{$prefix}-text-wrapperRef;
$el-container-ellipsis: #{$el-container}--text-overflow-ellipsis;
$el-container-left: #{$el-container}--text-align-left; // Can be moved to high level inside the scss structure
$el-container-right: #{$el-container}--text-align-right;  // Can be moved to high level inside the scss structure
$el-container-center: #{$el-container}--text-align-center;  // Can be moved to high level inside the scss structure
$el-container-justify: #{$el-container}--text-align-justify;  // Can be moved to high level inside the scss structure
$el-container-word-break: #{$el-container}--text-overflow-word-break;  // Can be moved to high level inside the scss structure

// ********************************************
// elements
$el-line: #{$el-container}__line;
$el-container-ellipsis-wrapper: #{$el-container}__ellipsis-wrapperRef;

.#{$el-container} {
  display: inline-flex;
  flex-direction: column;  

  &.#{$el-container-ellipsis} {
    flex-direction: row;
  
    .#{$el-container-ellipsis-wrapper}{
      white-space: nowrap;
      overflow: hidden;
    }

    &:after {
      content: "...";
      display: inline;
    }
  }
  &.#{$el-container-word-break}{
    word-break: break-all;
  }
  &.#{$el-container-left} {
    text-align: left;
  }

  &.#{$el-container-right} {
    text-align: right
  }

  &.#{$el-container-justify} {
    text-align: justify;    
  }
  
  &.#{$el-container-center} {
    text-align: center;
  }
}