// ********************************************
// container definition
$el-label-value: #{$prefix}-labelValue;
$el-label-value-group: #{$prefix}-labelValueGroup;

// ********************************************
// elements definition
$el-wrapper: #{$el-label-value}__wrapper;
$el-label-value-group-wrapper: #{$el-label-value-group}__wrapper;
$el-label-value-wrapper: #{$el-label-value}__label-value-wrapper;
$el-label-value-label: #{$el-label-value}__label;
$el-label-value-value: #{$el-label-value}__value;

.#{$el-label-value-group-wrapper} {
  display: flex;
  flex-direction: column;
  width: fit-content; 
  max-width: 100%;
}

.#{$el-label-value-group-wrapper}--horizontal {
  flex-direction: row;

  &.#{$el-label-value-group-wrapper}--inline {
    .#{$el-wrapper} {
      .#{$el-label-value-wrapper} {
        flex-direction: row;
  
        .#{$el-label-value-label} {
          margin-right: space(xs)
        }
      }
    }
  }  
}

.#{$el-label-value-group-wrapper}--vertical {
  align-items: flex-end;

  &.#{$el-label-value-group-wrapper}--inline {
    align-items: unset;
    .#{$el-wrapper} {
      margin: space(xs);

      .#{$el-label-value-wrapper} {
        flex-direction: row;
  
        .#{$el-label-value-label} {
          margin-right: space(xs)
        }
      }
    }
  }  
}

.#{$el-wrapper} {
  display: flex;
  flex-direction: row;
  width: auto; 
  max-width: 100%;
  margin: space(s);

  .em-ds-icon {
    margin-top: 1rem;
    fill: color(neutral, 500);
    height: auto;
    margin-right: space(xxs);
    
    svg {
      height: auto;
    }
  }

  &.#{$el-wrapper}--inverted {
    .em-ds-icon {
      margin-bottom: 1rem;
      margin-top: unset;
    }
  }

  .#{$el-label-value-wrapper} {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;

    .#{$el-label-value-value} {
      display: inline-flex;
    }
  
    .#{$el-label-value-label}--neutral500,
    .#{$el-label-value-value}--neutral500 {
      color: color(neutral, 500);
    }
  
    .#{$el-label-value-label}--left,
    .#{$el-label-value-value}--left {
      text-align: left;
    }
  
    .#{$el-label-value-label}--right,
    .#{$el-label-value-value}--right {
      text-align: right;
    }
  
    .#{$el-label-value-label}--center,
    .#{$el-label-value-value}--center {
      text-align: center;
    } 
  
    .#{$el-label-value-label}--neutral700,
    .#{$el-label-value-value}--neutral700 {
      color: color(neutral, 700);
    } 
    
    .#{$el-label-value-value}--s {
      font-size: 1rem;
    }   
  
    .#{$el-label-value-value}--m {
      font-size: 1.0769rem;
    }  
    
    .#{$el-label-value-value}--l {    
      font-size: space(s);
    }
  
    .#{$el-label-value-value}--semibold {    
      font-weight: 600;
    }     
  }
}