:host { display: inline-block; position: relative; }

  :host ::slotted( *:not(:last-child) ) {
    margin-bottom: var( --scu-flex-gap , 0);
  }

  :host( .no_color )  {
    position: relative;
  }
  :host( .no_color )::after {
    content : "color not found";
    position: absolute;
    top: 0; left: 0;
    background-color: red;
    color: white;
    padding: 4px;
  }

  :host( .size_1 ) {
    @include type-text-01;
  }

  :host( .size_2 ) {
    @include type-text-02;
  }

  :host( .size_3 ) {
    @include type-text-03;
  }

  :host( .size_4 ) {
    @include type-text-04;
  }

  :host( .size_5 ) {
    @include type-text-05;
  }

  :host( .size_6 ) {
    @include type-text-06;
  }

  :host( .size_7 ) {
    @include type-text-07;
  }

  :host( .size_8 ) {
    @include type-text-08;
  }

  :host( .size_9 ) {
    @include type-text-09;
  }

  :host( .size_10 ) {
    @include type-text-10;
  }



  // BOLD
  :host( .size_1_bold ) {
    @include type-text-bold-01;
  }

  :host( .size_2_bold ) {
    @include type-text-bold-02;
  }

  :host( .size_3_bold ) {
    @include type-text-bold-03;
  }

  :host( .size_4_bold ) {
    @include type-text-bold-04;
  }

  :host( .size_5_bold ) {
    @include type-text-bold-05;
  }

  :host( .size_6_bold ) {
    @include type-text-bold-06;
  }

  :host( .size_7_bold ) {
    @include type-text-bold-07;
  }

  :host( .size_8_bold ) {
    @include type-text-bold-08;
  }

  :host( .size_9_bold ) {
    @include type-text-bold-09;
  }

  :host( .size_10_bold ) {
    @include type-text-bold-10;
  }



  
  // uppercase
  :host( .size_1_uppercase ) {
    @include type-text-uppercase-01;
  }

  :host( .size_2_uppercase ) {
    @include type-text-uppercase-02;
  }

  :host( .size_3_uppercase ) {
    @include type-text-uppercase-03;
  }

  :host( .size_4_uppercase ) {
    @include type-text-uppercase-04;
  }

  :host( .size_5_uppercase ) {
    @include type-text-uppercase-05;
  }

  :host( .size_6_uppercase ) {
    @include type-text-uppercase-06;
  }

  :host( .size_7_uppercase ) {
    @include type-text-uppercase-07;
  }

  :host( .size_8_uppercase ) {
    @include type-text-uppercase-08;
  }

  :host( .size_9_uppercase ) {
    @include type-text-uppercase-09;
  }

  :host( .size_10_uppercase ) {
    @include type-text-uppercase-10;
  }


  :host( .align_left ) {
    text-align: left;
  }
  :host( .align_right ) {
    text-align: right;
  }
  :host( .align_center ) {
    text-align: center;
  }

  //.valign_top ) {
    
  //}

  :host( .valign_center ) {
    @include flex-fill-container;
    @include flex-center;
  }
    :host( .valign_center.align_left ) {
      @include flex-h-center-left;
    }
    :host( .valign_center.align_right ) {
      @include flex-h-right;
    }
    :host( .valign_center.align_center ) {
      @include flex-h-center;
    }

  :host( .valign_bottom ) {
    @include flex-fill-container;
    @include flex-h-bottom;
  }
    :host( .valign_bottom.align_right ) {
      @include flex-h-bottom-right;
    }
    :host( .valign_bottom.align_center ) {
      @include flex-h-bottom-center;
    }