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

/**
 * @summary Creates layout for a form element
 *
 * @name base
 * @selector .slds-form-element
 * @restrict div, fieldset, li
 * @variant
 */
.slds-form-element {
  position: relative;

  // Deprecated, use .form-element__label instead
  &__helper {
    @include deprecate('4.0.0') {
      font-size: $font-size-small;
    }
  }

  /**
   * Creates label styles for our form elements
   *
   * @selector .slds-form-element__label
   * @restrict .slds-form-element label, .slds-form-element span, .slds-form-element legend, [class*='slds-checkbox'] span, [class*='slds-radio'] span, span
   */
  &__label {
    display: inline-block;
    color: $color-text-label;
    font-size: $font-size-small;
    line-height: $line-height-text;
    margin-right: $spacing-small;
    margin-bottom: $spacing-xx-small;

    &:empty {
      margin: 0;
    }
  }

  /**
   * Wrapper to any form display element
   *
   * @selector .slds-form-element__control
   * @restrict .slds-form-element div
   */
  &__control {

    // Force radios and checkboxes to be on own line when there
    // are multiples in a group
    .slds-radio,
    .slds-checkbox {
      display: block;
    }
  }

  /**
   * When an icon sits within a form element wrapper and adjacent to another
   * element inside that wrapper such as a .form-element__label
   *
   * @selector .slds-form-element__icon
   * @restrict .slds-form-element div
   */
  &__icon {
    display: inline-block;
    position: relative; // Since this container can have a tooltip
  }

  /**
   * Creates inline help styles, sits below .form-element__control
   *
   * @selector .slds-form-element__help
   * @restrict .slds-form-element div
   */
  &__help {
    font-size: $font-size-small;
    margin-top: $spacing-x-small;
    display: block;
  }

  // Inline Edit on static form element
  &_edit,
  &--edit {

    .slds-form-element__static {
      width: calc(100% - #{$square-icon-small-boundary}); // Leave space for edit icon
    }
  }
}

/**
 * Required Star
 *
 * @selector .slds-required
 * @restrict .slds-form-element abbr, abbr
 */
.slds-required {
  color: $color-text-error;
  margin: 0 $spacing-xxx-small;
}

/**
 * Error styles for form element
 *
 * @selector .slds-has-error
 * @restrict .slds-form-element
 * @modifier
 * @group feedback
 */
.slds-has-error {

  .slds-form-element__help {
    color: $color-text-error;
  }
}