.euiDescriptionList {

  .euiDescriptionList__title {
    font-weight: $euiFontWeightMedium;
  }

  .euiDescriptionList__description {
    color: $euiColorDarkShade;
  }

  &.euiDescriptionList--row {

    .euiDescriptionList__title {
      @include euiFontSize;
      margin-top: $euiSize;

      // Make sure the first <dt> doesn't get a margine.
      &:first-of-type {
        margin-top: 0;
      }
    }

    .euiDescriptionList__description {
      @include euiFontSizeS;
    }

    // Lists can be aligned.
    &.euiDescriptionList--center {
      text-align: center;
    }

    &.euiDescriptionList--right {
      text-align: right;
    }

    // Compressed gets smaller fonts.
    &.euiDescriptionList--compressed {

      .euiDescriptionList__title {
        @include euiFontSizeS;
      }

      .euiDescriptionList__description {
        @include euiFontSizeS;
      }
    }
  }


  &.euiDescriptionList--column {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    > * {
      margin-top: $euiSize;
    }

    // First two items don't have margin
    > *:first-child, >:nth-child(2) {
      margin-top: 0;
    }

    .euiDescriptionList__title {
      @include euiFontSize;
      flex-basis: 50%;
      padding-right: $euiSizeS;
    }

    .euiDescriptionList__description {
      @include euiFontSize;
      flex-basis: 50%;
      padding-left: $euiSizeS;
    }

    // Align the title to smush against the description.
    &.euiDescriptionList--center {

      .euiDescriptionList__title {
        text-align: right;
      }
    }

    &.euiDescriptionList--compressed {

      .euiDescriptionList__title {
        @include euiFontSizeS;
      }

      .euiDescriptionList__description {
        @include euiFontSizeS;
      }
    }
  }

  &.euiDescriptionList--inline {

    .euiDescriptionList__title {
      @include euiFontSizeS;
      display: inline;
      border-radius: $euiBorderRadius;
      font-weight: $euiFontWeightRegular;
      background: $euiColorLightestShade;
      border: $euiBorderThin;
      padding:  0 $euiSizeXS;
      margin: 0 $euiSizeXS;

      // Make sure the first <dt> doesn't get a margine.
      &:first-of-type {
        margin-left: 0;
      }
    }

    .euiDescriptionList__description {
      @include euiFontSizeS;
      display: inline;
      word-break: break-all;
    }

    // Compressed when inline is even smaller.
    &.euiDescriptionList--compressed {

      .euiDescriptionList__title {
        @include euiFontSizeXS;
      }

      .euiDescriptionList__description {
        @include euiFontSizeXS;
      }
    }

    &.euiDescriptionList--center {
      text-align: center;
    }
  }

}
