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

@import 'deprecate';

/**
 * @summary Creates a form that consists of multiple form groups
 *
 * @name compound
 * @selector .slds-form_compound
 * @restrict div, fieldset
 * @variant
 */
.slds-form_compound,
.slds-form--compound {
  width: 100%;

  > .slds-form-element {
    margin-top:
      var(--slds-c-form-compound-spacing-block-start,
      var(--slds-c-form-compound-spacing-block, 0));
    margin-bottom:
      var(--slds-c-form-compound-spacing-block-end,
      var(--slds-c-form-compound-spacing-block, 0));
    margin-left:
      var(--slds-c-form-compound-spacing-inline-start,
      var(--slds-c-form-compound-spacing-inline, 0));
    margin-right:
      var(--slds-c-form-compound-spacing-inline-end,
      var(--slds-c-form-compound-spacing-inline, 0));
  }

  .slds-form-element__row {
    display: flex;
    margin-top:
      var(--slds-c-form-row-spacing-block-start,
      var(--slds-c-form-row-spacing-block, 0));
    margin-bottom:
      var(--slds-c-form-row-spacing-block-end,
      var(--slds-c-form-row-spacing-block, #{$spacing-xx-small}));
    margin-left:
      var(--slds-c-form-row-spacing-inline-start,
      var(--slds-c-form-row-spacing-inline, 0));
    margin-right:
      var(--slds-c-form-row-spacing-inline-end,
      var(--slds-c-form-row-spacing-inline, 0));

    + .slds-form-element__row {
      clear: both;
    }

    .slds-form-element {
      margin-bottom: 0;
    }

    .slds-form-element + .slds-form-element {
      padding-left: $spacing-x-small;
      margin-top: 0;
    }

    .slds-form-element__label {
      padding-top: 0;
    }
  }
}

/**
 * @summary Creates a form that consists of multiple form groups specific to an address form
 *
 * @name address
 * @selector .slds-form-element_address
 * @restrict .slds-form_compound
 * @modifier
 */
.slds-form-element_address {

  .slds-form-element__row {
    align-items: baseline;
  }
}