.data-row {
  margin-bottom: ru(.25);
  color: color('neutral-2');
}

.row {
  @include typography-light;

  display: flex;
  margin: 0;
}

.label {
  @include typography(6);

  display: flex;
  position: relative;
  max-width: 75%;
}

.label-text {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.description {
  @include typography(7);

  color: color('neutral-3');
}

.value {
  flex-grow: 1;
  text-align: right;
}

.tip {
  z-index: 1;
  position: relative;
  margin: 0 0 0 ru(.25);
}

/* -- Variants -- */
.large {
  .label {
    @include typography(4);
    @include typography-semibold;
  }

  .value {
    @include typography(3);
    @include typography-semibold;

    line-height: 1em;
    color: color('brand-2');
  }
}

.sub {
  .label {
    @include typography-light;
  }

  .value {
    color: color('brand-2');
  }
}

// Can be applied in addition to a variant
.indent {
  padding-left: ru(.75);
}

.data-row {
  margin-bottom: ru(.25);
  color: color('neutral-2');
}

.row {
  @include typography-light;

  display: flex;
  margin: 0;
}

.label {
  @include typography(6);

  display: flex;
  position: relative;
  max-width: 75%;
}

.label-text {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.description {
  @include typography(7);

  color: color('neutral-3');
}

.value {
  flex-grow: 1;
  text-align: right;
}

.tip {
  position: relative;
  margin: 0 0 0 ru(.25);
}

/* -- Variants -- */
.large {
  .label {
    @include typography(4);
    @include typography-semibold;
  }

  .value {
    @include typography(3);
    @include typography-semibold;

    line-height: 1em;
    color: color('brand-2');
  }
}

.sub {
  .label {
    @include typography-light;
  }

  .value {
    color: color('brand-2');
  }
}

// Can be applied in addition to a variant
.indent {
  padding-left: ru(.75);
}

Fix z-indexing issue with tooltips in datarows
Fix z-indexing issue with tooltips in datarows
