.valueWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .alignRight {
    text-align: right;
  }
  .alignLeft {
    text-align: left;
  }
}

.valueWrapperXS {
  font-size: var(--font-size-xs);
  .value .leading {
    padding-left: var(--font-size-xs);
  }
}

.valueWrapperSmall {
  font-size: var(--font-size-sm);
  .value {
    &.leading {
      padding-left: calc(var(--font-size-sm) * 0.6);
    }
    .suffix {
      font-size: var(--font-size-xs);
    }
  }
}

.valueWrapperMedium {
  font-size: var(--font-size-md);
  .value {
    &.leading {
      padding-left: calc(var(--font-size-md) * 0.6);
    }
    .suffix {
      font-size: var(--font-size-sm);
    }
  }
}

.valueWrapperLarge {
  font-size: var(--font-size-lg);
  .value {
    &.leading {
      padding-left: calc(var(--font-size-md) * 0.6);
    }
    .suffix {
      font-size: var(--font-size-md);
    }
  }
}

.valueWrapperTitle {
  .value {
    font-size: var(--font-size-md);
    &.leading {
      padding-left: calc(var(--font-size-md) * 0.6);
    }
  }
  .label {
    font-size: var(--font-size-xs);
    font-weight: 300;
  }
  .suffix {
    font-size: var(--font-size-xs);
  }
}

.label {
  color: var(--border-light);
  font-weight: 500;
}

.hasBubble {
  display: inline-flex;
  align-items: center;
  position: relative;
  .label {
    padding-left: 1rem;
    align-self: center;
    height: 12px;
    &:before {
      position: absolute;
      content: '';
      background: var(--color-primary);
      height: 8px;
      width: 8px;
      margin-top: 2px;
      left: 0;
      border-radius: 4px;
      align-self: center;
    }
  }
}

.valueInline {
  padding-bottom: 0.5rem;
  .valueWrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.hasBubble .valueInline {
  padding-left: 0;
  &:before {
    margin-right: 0.5rem;
    margin-left: -1.5rem;
  }
}

.hasBubble.bubbleSuccess {
  .label:before,
  .valueInline:before {
    background: var(--color-success);
  }
}

.hasBubble.bubbleError {
  .label:before,
  .valueInline:before {
    background: var(--color-error);
  }
}

.hasBubble.bubbleWarning {
  .label:before,
  .valueInline:before {
    background: var(--color-warning);
  }
}

.hasBubble.bubblePrimary {
  .label:before,
  .valueInline:before {
    background: var(--color-primary);
  }
}

.hasBubble.bubbleAccent {
  .label:before,
  .valueInline:before {
    background: var(--color-accent);
  }
}

.hasBubble.bubbleInactive {
  .label:before,
  .valueInline:before {
    background: var(--border-light);
  }
}

.hasBubble.bubbleUnconfigured {
  .label:before,
  .valueInline:before {
    background: var(--color-warning);
  }
}