// Lightning Design System 2.8.0
// 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
     */
    &__label {
      float: left;
      clear: left;
    }

    /**
     * @summary Marks a description
     * @selector .slds-dl_inline__detail
     * @modifier
     */
    &__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;
  }
}

/**
 * @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 {
  @include mq-small-min {
    display: flex;
    flex-wrap: wrap;

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

    /**
     * @summary Marks a description
     * @selector .slds-dl_horizontal__detail
     * @modifier
     */
    &__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%;
    }
  }
}