$label-color: var(--color-text1-2, #5a5a5a);
$label-size: var(--font-size-body-1, 12px);
$label-weight: var(--font-weight-medium, 500);
$text-color: var(--color-text1-3, #333333);
$text-size: var(--font-size-body-1, 12px);
// $text-weight: var(--font-weight-medium, 500);

$header-label-color: var(--color-text1-2, #5a5a5a);
$header-label-size: var(--font-size-body-1, 12px);
// $header-label-weight: var(--font-weight-medium, 500);
$header-text-color: var(--color-text1-3, #333333);
$header-text-size: var(--font-size-body-1, 12px);
// $header-text-weight: var(--font-weight-medium, 500);

$item-padding-bottom: 8px;

.teamix-pro-info-item {
  width: 100%;
  padding-bottom: $item-padding-bottom;
  &-header-row {
    display: flex;
    align-items: flex-start;

    &-center {
      align-items: center;
    }
  }
  &-base-row {
    display: flex;
    align-items: flex-start;
    &-center {
      align-items: center;
    }
  }
}

.teamix-pro-info-item-label {
  color: $label-color;
  font-size: $label-size;
  // font-weight: $label-weight;
  display: unset;
}

.teamix-pro-info-item-value {
  color: $text-color;
  font-size: $text-size;
  //display: unset;
  width: 100%;
  padding-right: 20px;
}

.teamix-pro-info-item-header-label {
  color: $header-label-color;
  font-size: $header-label-size;
  // font-weight: $header-label-weight;
  display: inline-block;
  white-space: nowrap;
}

.teamix-pro-info-item-header-value {
  color: $header-text-color;
  font-size: $header-text-size;
  display: inline-block;
  width: 100%;
  padding-right: 20px;
}

.teamix-pro-info-item-base-skeleton-box {
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  span {
    width: 100%
  }
}