/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

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

  &.ouiDescriptionList--row {

    .ouiDescriptionList__title {
      @include ouiTitle('xs');
      line-height: $ouiLineHeight;
      margin-top: $ouiSize;

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

    .ouiDescriptionList__description {
      @include ouiFontSizeS;
    }

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

    // Reversed makes the description larger than the title
    &.ouiDescriptionList--reverse {
      .ouiDescriptionList__title {
        @include ouiText;
        @include ouiFontSizeS;
      }

      .ouiDescriptionList__description {
        @include ouiTitle('xs');
      }
    }

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

      .ouiDescriptionList__title {
        @include ouiTitle('xxs');
        line-height: $ouiLineHeight;
      }

      .ouiDescriptionList__description {
        @include ouiFontSizeS;
      }

      &.ouiDescriptionList--reverse {
        .ouiDescriptionList__title {
          @include ouiText;
          @include ouiFontSizeS;
        }

        .ouiDescriptionList__description {
          @include ouiTitle('xxs');
          line-height: $ouiLineHeight;
        }
      }
    }
  }


  &.ouiDescriptionList--column,
  &.ouiDescriptionList--responsiveColumn {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    > * {
      margin-top: $ouiSize;
    }

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

    .ouiDescriptionList__title {
      @include ouiTitle('xs');
      line-height: $ouiLineHeight;
      width: 50%; // Flex-basis doesn't work in IE with padding
      padding-right: $ouiSizeS;
    }

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

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

    &.ouiDescriptionList--reverse {
      .ouiDescriptionList__title {
        @include ouiText;
        @include ouiFontSize;
      }

      .ouiDescriptionList__description {
        @include ouiTitle('xs');
        line-height: $ouiLineHeight;
      }
    }

    &.ouiDescriptionList--compressed {
      .ouiDescriptionList__title {
        @include ouiTitle('xxs');
        line-height: $ouiLineHeight;
      }

      .ouiDescriptionList__description {
        @include ouiFontSizeS;
      }

      &.ouiDescriptionList--reverse {
        .ouiDescriptionList__title {
          @include ouiText;
          @include ouiFontSizeS;
        }

        .ouiDescriptionList__description {
          @include ouiTitle('xxs');
          line-height: $ouiLineHeight;
        }
      }
    }
  }

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

      .ouiDescriptionList__title,
      .ouiDescriptionList__description {
        width:  100%;
        padding: 0;
      }

      .ouiDescriptionList__description {
        @include ouiFontSizeS;
        margin-top: 0;
      }

      &.ouiDescriptionList--center {
        .ouiDescriptionList__title,
        .ouiDescriptionList__description {
          text-align: center;
        }
      }

      &.ouiDescriptionList--reverse {
        .ouiDescriptionList__title {
          @include ouiFontSizeS;
        }

        .ouiDescriptionList__description {
          @include ouiTitle('xs');
        }
      }
    }
  }

  &.ouiDescriptionList--inline {

    .ouiDescriptionList__title {
      @include ouiFontSizeS;
      display: inline;
      border-radius: $ouiBorderRadius;
      font-weight: $ouiFontWeightRegular;
      background: $ouiColorLightestShade;
      border: $ouiBorderThin;
      padding:  0 $ouiSizeXS;
      margin: 0 $ouiSizeXS;

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

    .ouiDescriptionList__description {
      @include ouiFontSizeS;
      display: inline;
      word-break: break-all;
    }

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

      .ouiDescriptionList__title {
        @include ouiFontSizeXS;
      }

      .ouiDescriptionList__description {
        @include ouiFontSizeXS;
      }
    }

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

}