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

.row {
  align-items: center;
  display: flex;
  margin: 0;
}

.label {
  @include typography-a(10);

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

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

.description {
  @include typography-b-10();
}

.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-a-6-bold;

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

    .unit {
      font-weight: 900;
    }
  }
}

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

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

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

.subitem {
  .label {
    @include typography-b-10;
  }

  .value, .amount {
    @include typography-regular();
  }
}

.highlight {
  .value, .amount {
    color: color('secondary-1');
  }
}