// 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

/**
 * @summary Creates layout for a form element
 * @name base
 * @selector .slds-form-element
 * @restrict div, fieldset, li
 * @support dev-ready
 * @variant
 */
.slds-form-element {
  position: relative;
  min-width: 0;
}

/**
 * @summary 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, .slds-form-element div, [class*='slds-checkbox'] span, [class*='slds-radio'] span
 */
.slds-form-element__label {
  @include hyphenate;
  display: inline-block;
  color: var(--slds-g-color-neutral-base-30, #{$color-text-label});
  font-size: $form-label-font-size;
  padding-right: $spacing-x-small;
  padding-top: $spacing-xx-small;
  margin-bottom: $spacing-xxx-small;

  @include rtl() {
    /*! @noflip */
    padding-right: 0;

    /*! @noflip */
    padding-left: $spacing-x-small;
  }

  &:empty {
    margin: 0;
  }
}

/**
 * @summary Wrapper to any form display element
 * @selector .slds-form-element__control
 * @restrict .slds-form-element div
 */
.slds-form-element__control {
  // This clear:left is due to the label of the form element being set to float: left since we don't know if the help-text icon is present in the DOM. Since legend elements can only be floated to modify layout to accommodate the help-text icon, we need to make sure the control stacks below the label by default
  clear: left;
  position: relative;

  @include rtl() {
    /*! @noflip */
    clear: right;
  }

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

/**
 * @summary 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
 */
.slds-form-element__icon {
  display: inline-block;
  position: relative; // Since this container can have a tooltip
  padding-top: $spacing-xx-small;
  vertical-align: top;
  line-height: $line-height-reset;
  z-index: 1; // Helps ensure the help-text icon is clickable in all implementations

  .slds-button_icon {
    position: relative; // Resetting position since the edit button icon to invoke inline-edit is set to position: absolute
  }
}

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

/**
 * @summary Modifier on slds-form-element that it needs to reserve space for the inline-edit trigger button
 * @selector .slds-form-element_edit
 * @restrict .slds-form-element
 */
.slds-form-element_edit,
.slds-form-element--edit {

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

/**
 * @summary When a form element is in view mode, we modify some styling
 * @selector .slds-form-element_readonly
 * @restrict .slds-form-element
 */
.slds-form-element_readonly {
  flex-basis: 0%;
  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  margin-bottom: 0;

  .slds-form-element__control {
    padding-top: $spacing-xxx-small;
    padding-bottom: $spacing-xxx-small;
    // Heads up: no touch-device() min-height is intended per design which deviates from touch input height system
  }

  // We want no spacing in read only and allow line-height to handle white-space
  .slds-form-element__label {
    margin-bottom: 0;
  }
}

/**
 * @summary The form element label when applied to a legend element
 * @selector .slds-form-element__legend
 * @restrict .slds-form-element legend, .slds-form-element span
 */
.slds-form-element__legend {
  font-weight: $font-weight-bold;
  float: left; // Required to be float: left to accommodate for help-text icon

  @include rtl() {
    /*! @noflip */
    float: right;

    /*! @noflip */
    padding-right: 0;
  }
}

/**
 * @summary Fixed text that sits to the left or right of an input
 * @selector .slds-form-element__addon
 * @restrict .slds-form-element span
 */
.slds-form-element__addon {
  display: inline-block;
  margin: 0 $spacing-x-small;
  align-self: center;
}

/**
 * @summary Read-only components are used to display immutable data within a form
 * @summary Initializes read-only form element
 * @selector .slds-form-element__static
 * @restrict .slds-form-element span, .slds-form-element div
 */
.slds-form-element__static {
  @include break-word;
  display: inline-block;
  font-size: $input-static-font-size;
  font-weight: $input-static-font-weight;
  color: var(--slds-g-color-neutral-base-10, #{$input-static-color});
  width: 100%;

  &.slds-text-longform *:last-child {
    margin-bottom: 0;
  }

  &:empty {
    min-height: calc(#{$var-font-size-7} + 1px); // 22px|20px + 1px
    vertical-align: bottom;
  }

  /**
   * @summary Inline Edit on static form element
   * @selector .slds-form-element__static_edit
   * @restrict .slds-form-element__static
   * @deprecated
   */
  &_edit,
  &--edit {
    width: calc(100% - #{$square-icon-small-boundary}); // Leave space for edit icon
  }
}

/**
 * @summary Required asterisk
 * @selector .slds-required
 * @restrict .slds-form-element abbr, abbr
 */
.slds-required {
  color: var(--slds-g-color-error-base-40, #{$color-text-error});
  margin: 0 $spacing-xxx-small;
}

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

  .slds-form-element__help {
    color: var(--slds-g-color-error-base-40, #{$color-text-error});
  }
}