/**
* Labeled definition list
*/

.labeled {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: $labeledSpacing 0 0 0;

  > dt {
    color: $labelColor;
    font-size: $labelFontSize;
    font-weight:$labelFontWeight;
  }

  > dd {
    margin: 0 0 $labeledSpacing 0;
  }
  > dd + dt {
    margin-top: -$labeledSpacing/2;
  }

  border-bottom: $globalBorder;

  &:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
  }

  &.alternate {
    > dt {
      color: $baseColor;
      font-size:$baseFontSize;
      font-weight:normal;
    }
    > dd {
      @include create-color-section($grayColor);
    }

    > dd + dt {
      margin-top: 0;
    }
  }

  // modifier to make the last of a list without a margin
  &.last-tight {
    &:last-of-type {
      dd:last-of-type,
      dt:last-of-type {
        margin-bottom: 0;
      }
    }
  }

}

.labeled:not(.wide) {
  > dt {
    margin-bottom: $labelMargin;
  }
}

// Media specific
@media #{$mediaDesktop} {
  .labeled:not(.wide) {
    flex-direction: row;

    > dd ~ dd,
    > dt ~ dt {
      margin-top: -$labeledSpacing / 2;
    }

    > dt {
      width: $labelWidthDesktop;
      min-width: 0;
      padding: $labelPaddingDesktop;
      padding-top: $labeledPaddingTopDesktop;
      // fixes firefox (-1px)
      margin-bottom: calc(#{$labeledSpacing} - 1px);
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: $labelTextAlign;
    }
    > dd {
      padding: $labelPaddingDesktop;
      padding-top: 0;
      width: $formWidthControls;
    }

    &.three-columns {
      > dd {
        padding-right: 0;
      }
    }

    // modifier to let the labels stay in a single line
    &.nowrap {
      > dt {
        white-space: nowrap;
      }
    }

  }
}

@media #{$mediaInBetween} {
  .labeled:not(.wide) {
    &.three-columns {
      > dd {
        padding-right: $thirdColumnPaddingOffsetInBetween;
      }
    }
    &.between-thirty-sixty {
      > dt {
        width: 35%;
      }

      > dd {
        width: 65%;
      }
    }
    &.between-fifty-fifty {
      > dd,
      > dt {
        width: 50%;
      }
    }
  }
}

@media #{$mediaDesktop} {
  .labeled:not(.wide) {
    &.desktop-fifty-fifty {
      > dd,
      > dt {
        width: 50%;
      }
    }
  }
}