/* -------------------------------------------------- */
/*    Definition List
/* -------------------------------------------------- */

.m-definitionListWrapper {
  @include f(s(2), s(4), padding-left padding-right);
}

.m-definitionList {
  @include make-row();
  @include make-vr();
  display: flex;
  flex-direction: row;
  align-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  border-top: 0;
  font-size: fs('ms-1');
  border: 1px solid c('black', '25');
  border-bottom: 0;

  &__listTerm {
    @include f(s(1), s(2), padding-top padding-bottom);
    border-bottom: 1px dotted c('black', '25');
    background-color: c('black', '05');
    border-right: 0;
    @include make-col(6);
    font-weight: 700;

    @include media('>=m') {
      border-right: 1px dotted c('black', '25');
      border-bottom: 1px solid c('black', '25');
    }
  }

  &__listDescription {
    @include f(s(1), s(2), padding-top padding-bottom);
    @include make-col(6);
    border-bottom: 1px solid c('black', '25');
  }

  // Row Layout
  &--layout-row {
    .m-definitionList__listTerm {
      @include make-col(12);
    }

    .m-definitionList__listDescription {
      @include make-col(12);
    }
  }

  // Table Layout
  &--layout-table {
    // 50-50
    &.m-definitionList--columsRatio-50-50 {
      .m-definitionList__listTerm {
        @include make-col(12);

        @include media('>=m') {
          @include make-col(6);
        }
      }

      .m-definitionList__listDescription {
        @include make-col(12);

        @include media('>=m') {
          @include make-col(6);
        }
      }
    }

    // 33-66
    &.m-definitionList--columsRatio-33-66 {
      .m-definitionList__listTerm {
        @include make-col(12);

        @include media('>=m') {
          @include make-col(4);
        }
      }

      .m-definitionList__listDescription {
        @include make-col(12);

        @include media('>=m') {
          @include make-col(8);
        }
      }
    }

    // 25-75
    &.m-definitionList--columsRatio-25-75 {
      .m-definitionList__listTerm {
        @include make-col(12);

        @include media('>=m') {
          @include make-col(3);
        }
      }

      .m-definitionList__listDescription {
        @include make-col(12);

        @include media('>=m') {
          @include make-col(9);
        }
      }
    }
  }
}
