.kuiInfoPanel {
  padding: 14px 20px 18px;
  line-height: $kuiLineHeight;
  border: 2px solid;
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--info {
  border-color: rgba($kuiInfoColor, 0.25); /* 1 */
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--success {
  border-color: rgba($kuiSuccessColor, 0.25); /* 1 */
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--warning {
  border-color: rgba($kuiWarningColor, 0.25); /* 1 */
}

/**
 * 1. TODO: Pick a hex value instead of making these colors translucent.
 */
.kuiInfoPanel--error {
  border-color: rgba($kuiDangerColor, 0.25); /* 1 */
}

/**
 * 1. Align with first line of title text if it wraps.
 */
.kuiInfoPanelHeader {
  display: flex;
  align-items: baseline; /* 1 */
}

.kuiInfoPanelHeader__icon {
  margin-right: 10px;
  font-size: $kuiFontSize;
  line-height: $kuiLineHeight;
}

.kuiInfoPanelHeader__title {
  font-size: $kuiFontSize;
  line-height: $kuiLineHeight;
  font-weight: $kuiFontWeightBold;
}

.kuiInfoPanelBody {
  margin-top: $infoPanelVerticalRhythm;

  > * + * {
    margin-top: $infoPanelVerticalRhythm;
  }
}

.kuiInfoPanelBody__message {
  font-size: $kuiFontSize;
  line-height: $kuiLineHeight;
}