_description_list.scss

.euiDescriptionList {
  // sass-lint:disable-block nesting-depth

  &.euiDescriptionList--row {

    .euiDescriptionList__title {
      @include euiTitle('xs');
      line-height: $euiLineHeight;
      margin-top: $euiSize;

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

    .euiDescriptionList__description {
      @include euiFontSizeS;
    }

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

    // Reversed makes the description larger than the title
    &.euiDescriptionList--reverse {
      .euiDescriptionList__title {
        @include euiText;
        @include euiFontSizeS;
      }

      .euiDescriptionList__description {
        @include euiTitle('xs');
      }
    }

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

      .euiDescriptionList__title {
        @include euiTitle('xxs');
        line-height: $euiLineHeight;
      }

      .euiDescriptionList__description {
        @include euiFontSizeS;
      }

      &.euiDescriptionList--reverse {
        .euiDescriptionList__title {
          @include euiText;
          @include euiFontSizeS;
        }

        .euiDescriptionList__description {
          @include euiTitle('xxs');
          line-height: $euiLineHeight;
        }
      }
    }
  }


  &.euiDescriptionList--column,
  &.euiDescriptionList--responsiveColumn {
    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 euiTitle('xs');
      line-height: $euiLineHeight;
      width: 50%; // Flex-basis doesn't work in IE with padding
      padding-right: $euiSizeS;
    }

    .euiDescriptionList__description {
      @include euiFontSize;
      width: 50%; // Flex-basis doesn't work in IE with padding
      padding-left: $euiSizeS;
    }

    // Align the title to smash against the description.
    &.euiDescriptionList--center {
      .euiDescriptionList__title {
        text-align: right;
      }
    }

    &.euiDescriptionList--reverse {
      .euiDescriptionList__title {
        @include euiText;
        @include euiFontSize;
      }

      .euiDescriptionList__description {
        @include euiTitle('xs');
        line-height: $euiLineHeight;
      }
    }

    &.euiDescriptionList--compressed {
      .euiDescriptionList__title {
        @include euiTitle('xxs');
        line-height: $euiLineHeight;
      }

      .euiDescriptionList__description {
        @include euiFontSizeS;
      }

      &.euiDescriptionList--reverse {
        .euiDescriptionList__title {
          @include euiText;
          @include euiFontSizeS;
        }

        .euiDescriptionList__description {
          @include euiTitle('xxs');
          line-height: $euiLineHeight;
        }
      }
    }
  }

  &.euiDescriptionList--responsiveColumn {
    @include euiBreakpoint('xs', 's') {
      display: block;

      .euiDescriptionList__title,
      .euiDescriptionList__description {
        width:  100%;
        padding: 0;
      }

      .euiDescriptionList__description {
        @include euiFontSizeS;
        margin-top: 0;
      }

      &.euiDescriptionList--center {
        .euiDescriptionList__title,
        .euiDescriptionList__description {
          text-align: center;
        }
      }

      &.euiDescriptionList--reverse {
        .euiDescriptionList__title {
          @include euiFontSizeS;
        }

        .euiDescriptionList__description {
          @include euiTitle('xs');
        }
      }
    }
  }

  &.euiDescriptionList--inline {

    .euiDescriptionList__title {
      @include euiFontSizeS;
      display: inline;
      border-radius: $euiBorderRadiusSmall;
      font-weight: $euiFontWeightMedium;
      background-color: tintOrShade($euiColorLightShade, 50%, 0%);
      padding:  1px $euiSizeXS;
      margin: 0 $euiSizeXS;

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

    .euiDescriptionList__description {
      @include euiFontSizeS;
      display: inline;
    }

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

      .euiDescriptionList__title {
        @include euiFontSizeXS;
        padding:  0 $euiSizeXS;
      }

      .euiDescriptionList__description {
        @include euiFontSizeXS;
      }
    }

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

}