@import "./../../style-config/colors";

$carbon-detail-icon-margin: 10px;
$carbon-detail-icon-size: 16px;

.carbon-detail {
  position: relative;

  + .carbon-detail {
    margin-top: 20px;
  }
}

.carbon-detail__content {
  display: inline-block;
  line-height: 18px;
  white-space: pre-wrap;
  text-overflow: ellipsis;
  overflow: hidden;

  .carbon-detail--has-icon & {
    margin-left: $carbon-detail-icon-margin + $carbon-detail-icon-size;
  }
}

.carbon-detail__icon {
  position: absolute;
  color: $grey-dark-blue-50;
  height: $carbon-detail-icon-size;
  width: $carbon-detail-icon-size;
  top: -1px;
  vertical-align: top;

  .carbon-icon__svg-icon {
    height: $carbon-detail-icon-size;
    width: $carbon-detail-icon-size;
    vertical-align: middle;
  }
}

.carbon-detail__footnote {
  color: $grey-dark-blue-80;
  font-size: 13px;
  position: relative;
  margin-top: -2px;

  .carbon-detail--has-icon & {
    margin-left: $carbon-detail-icon-margin + $carbon-detail-icon-size;
  }
}