// Lightning Design System 2.24.3
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Causes description list to display horizontally with `dt` followed immediately by the `dd`.
 * @selector .slds-dl_inline
 * @modifier
 */
.slds-dl_inline,
.slds-dl--inline {
  @include clearfix;
}

@include mq-small-min {
  /**
    * @summary Marks a term
    * @selector .slds-dl_inline__label
    * @modifier
    */
  .slds-dl_inline__label,
  .slds-dl--inline__label {
    float: left;
    clear: left;
  }

  /**
    * @summary Marks a description
    * @selector .slds-dl_inline__detail
    * @modifier
    */
  .slds-dl_inline__detail,
  .slds-dl--inline__detail {
    float: left;
    padding-left: $spacing-xx-small;
  }
}

.slds-region_narrow {

  .slds-dl_inline__label,
  .slds-dl_inline__detail {
    float: left;
  }

  .slds-dl_inline__label {
    clear: left;
  }

  .slds-dl_inline__detail {
    padding-left: $spacing-xx-small;
  }
}

@include mq-small-min {
  /**
    * @summary Causes description list to display horizontally with `dt` consuming 33% of the space and the `dd` taking up the rest.
    * @selector .slds-dl_horizontal
    * @modifier
    */
  .slds-dl_horizontal,
  .slds-dl--horizontal {
    display: flex;
    flex-wrap: wrap;
  }

  /**
    * @summary Marks a term
    * @selector .slds-dl_horizontal__label
    * @modifier
    */
  .slds-dl_horizontal__label,
  .slds-dl--horizontal__label {
    width: 30%;
    padding-right: $spacing-small;
  }

  /**
    * @summary Marks a description
    * @selector .slds-dl_horizontal__detail
    * @modifier
    */
  .slds-dl_horizontal__detail,
  .slds-dl--horizontal__detail {
    width: 70%;
  }
}

.slds-region_narrow {

  .slds-dl_horizontal {
    display: flex;
    flex-wrap: wrap;

    .slds-dl_horizontal__label {
      width: 30%;
      padding-right: $spacing-small;
    }

    .slds-dl_horizontal__detail {
      width: 70%;
    }
  }
}