/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/* Base */
.slds-form-element {
  position: relative;
  min-width: 0;
}

.slds-form-element__label {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  display: inline-block;
  color: var(--slds-s-label-color, var(--slds-g-color-on-surface-2));
  font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
  font-weight: var(--slds-s-label-font-weight);
  padding-inline-end: 0;
  padding-block-start: var(--slds-g-spacing-1);
  margin-inline-end: var(--slds-g-spacing-2);
  margin-block-end: var(--slds-s-label-spacing-gap, calc(var(--slds-g-spacing-1) / 2));
}

.slds-form-element__label:empty {
  margin: 0;
}

.slds-form-element__control {
  clear: inline-start;
  position: relative;
}

.slds-form-element__control .slds-radio,
.slds-form-element__control .slds-checkbox {
  display: block;
}

.slds-form-element__icon {
  display: inline-block;
  position: relative;
  padding-block-start: var(--slds-g-spacing-1);
  vertical-align: top;
  line-height: var(--slds-g-font-lineheight-1);
  z-index: 1;
}

.slds-form-element__icon .slds-button_icon {
  position: relative;
}

.slds-form-element__help,
.slds-form-element__helper {
  font-size: var(--slds-s-helptext-font-size, var(--slds-g-font-scale-neg-2));
  margin-block-start: calc(var(--slds-g-spacing-1) / 2);
  display: block;
  color: var(--slds-s-helptext-color);
}

.slds-form-element_edit .slds-form-element__static {
  width: calc(100% - var(--slds-g-sizing-7));
}

.slds-form-element_readonly {
  border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  margin-block-end: 0;
}

.slds-form-element_readonly .slds-form-element__control {
  padding-block-start: calc(var(--slds-g-spacing-1) / 2);
  padding-block-end: calc(var(--slds-g-spacing-1) / 2);
}

.slds-form-element_readonly .slds-form-element__label {
  margin-block-end: 0;
}

.slds-form-element__legend {
  float: inline-start;
  font-size: var(--slds-g-font-scale-1);
  font-weight: var(--slds-g-font-weight-6);
}

.slds-form-element__addon {
  display: inline-block;
  margin: 0 var(--slds-g-spacing-2);
  align-self: center;
}

.slds-form-element__static {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  display: inline-block;
  font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-1));
  font-weight: var(--slds-g-font-weight-4);
  color: var(--slds-g-color-neutral-base-10);
  width: 100%;
}

.slds-form-element__static.slds-text-longform *:last-child {
  margin-block-end: 0;
}

.slds-form-element__static:empty {
  min-height: calc(var(--slds-g-sizing-6) + 1px);
  vertical-align: bottom;
}

.slds-form-element__static--edit {
  width: calc(100% - var(--slds-g-sizing-7));
}

.slds-required {
  color: var(--slds-g-color-error-1);
  margin: 0 calc(var(--slds-g-spacing-1) / 2);
}

.slds-has-error .slds-form-element__help {
  color: var(--slds-g-color-error-1);
}

/* Form Layout Base */
.slds-form_inline .slds-form-element,
.slds-form_inline .slds-form-element__label,
.slds-form_inline .slds-form-element__control {
  display: block;
}

.slds-form_inline .slds-form-element + .slds-form-element {
  margin-block-start: var(--slds-g-spacing-3);
}

@media (min-width: 30em) {
  .slds-form_inline .slds-form-element {
    margin-inline-end: var(--slds-g-spacing-2);
  }

  .slds-form_inline .slds-form-element + .slds-form-element {
    margin-block-start: 0;
  }

  .slds-form_inline .slds-form-element,
  .slds-form_inline .slds-form-element__label,
  .slds-form_inline .slds-form-element__control {
    display: inline-block;
    vertical-align: middle;
    margin-block-end: 0;
  }
}

.slds-form-element__legend_has-tooltip {
  float: inline-start;
}

/* Address */
.slds-form-element_address .slds-form-element__row {
  align-items: baseline;
}

/* Stacked */
.slds-form-element_stacked,
.slds-form_stacked .slds-form-element,
.slds-form_horizontal .slds-form-element_stacked {
  display: block;
}

.slds-form-element_stacked:not(.slds-form-element_readonly),
.slds-form_stacked .slds-form-element:not(.slds-form-element_readonly),
.slds-form_horizontal .slds-form-element_stacked:not(.slds-form-element_readonly) {
  margin-block-end: var(--slds-g-spacing-2);
}

.slds-form-element_stacked:not(.slds-is-editing),
.slds-form_stacked .slds-form-element:not(.slds-is-editing),
.slds-form_horizontal .slds-form-element_stacked:not(.slds-is-editing) {
  padding: 0 var(--slds-g-spacing-1);
}

.slds-form-element_stacked .slds-form-element,
.slds-form_stacked .slds-form-element .slds-form-element,
.slds-form_horizontal .slds-form-element_stacked .slds-form-element {
  padding: 0;
  margin-block-end: 0;
}

.slds-form-element_stacked:not([class*='slds-size']),
.slds-form_stacked .slds-form-element:not([class*='slds-size']),
.slds-form_horizontal .slds-form-element_stacked:not([class*='slds-size']) {
  width: 100%;
  flex-basis: 100%;
}

.slds-form-element_stacked .slds-checkbox,
.slds-form-element_stacked .slds-radio,
.slds-form_stacked .slds-form-element .slds-checkbox,
.slds-form_stacked .slds-form-element .slds-radio,
.slds-form_horizontal .slds-form-element_stacked .slds-checkbox,
.slds-form_horizontal .slds-form-element_stacked .slds-radio {
  display: block;
}

.slds-form-element_stacked .slds-form-element__label,
.slds-form-element_stacked .slds-form-element__control,
.slds-form_stacked .slds-form-element .slds-form-element__label,
.slds-form_stacked .slds-form-element .slds-form-element__control,
.slds-form_horizontal .slds-form-element_stacked .slds-form-element__label,
.slds-form_horizontal .slds-form-element_stacked .slds-form-element__control {
  border-bottom: 0;
  padding-inline-start: 0;
}

.slds-form-element_stacked .slds-form-element__control,
.slds-form_stacked .slds-form-element .slds-form-element__control,
.slds-form_horizontal .slds-form-element_stacked .slds-form-element__control {
  width: 100%;
  flex-basis: 100%;
  clear: inline-start;
}

.slds-form-element_stacked .slds-form-element__icon,
.slds-form_stacked .slds-form-element .slds-form-element__icon,
.slds-form_horizontal .slds-form-element_stacked .slds-form-element__icon {
  float: none;
  padding-block-start: var(--slds-g-spacing-1);
}

/* Horizontal */
.slds-form-element_horizontal,
.slds-form_horizontal .slds-form-element,
.slds-form_stacked .slds-form-element_horizontal {
  display: block;
}

.slds-form-element_horizontal:not(.slds-form-element_readonly),
.slds-form_horizontal .slds-form-element:not(.slds-form-element_readonly),
.slds-form_stacked .slds-form-element_horizontal:not(.slds-form-element_readonly) {
  margin-block-end: var(--slds-g-spacing-2);
}

.slds-form-element_horizontal:not([class*='slds-size']),
.slds-form_horizontal .slds-form-element:not([class*='slds-size']),
.slds-form_stacked .slds-form-element_horizontal:not([class*='slds-size']) {
  width: 100%;
  flex-basis: 100%;
}

.slds-form-element_horizontal:not(.slds-is-editing),
.slds-form_horizontal .slds-form-element:not(.slds-is-editing),
.slds-form_stacked .slds-form-element_horizontal:not(.slds-is-editing) {
  padding-block: var(--slds-g-spacing-var-1);
  padding-inline: var(--slds-g-spacing-1);
}

.slds-form-element_horizontal .slds-form-element,
.slds-form_horizontal .slds-form-element .slds-form-element,
.slds-form_stacked .slds-form-element_horizontal .slds-form-element {
  padding: 0;
  margin-block-end: 0;
}

.slds-form-element_horizontal.slds-is-edited,
.slds-form_horizontal .slds-form-element.slds-is-edited,
.slds-form_stacked .slds-form-element_horizontal.slds-is-edited {
  padding-block-start: calc(var(--slds-g-spacing-4) + var(--slds-g-spacing-1));
}

@media (min-width: 48em) {
  .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__label,
  .slds-form_horizontal .slds-form-element.slds-form-element_1-col .slds-form-element__label,
  .slds-form_stacked .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__label {
    max-width: calc((50% - 33.333%) - 1.25rem);
  }

  .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__control,
  .slds-form_horizontal .slds-form-element.slds-form-element_1-col .slds-form-element__control,
  .slds-form_stacked .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__control {
    padding-inline-start: calc((50% - 33.333%) - (0.25rem * 2));
  }

  .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__help,
  .slds-form_horizontal .slds-form-element.slds-form-element_1-col .slds-form-element__help,
  .slds-form_stacked .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__help {
    margin-inline-start: calc((50% - 33.333%) - (var(--slds-g-spacing-1) * 2));
  }

  .slds-form-element_horizontal.slds-form-element_1-col .slds-input-has-icon_left .slds-input__icon,
  .slds-form_horizontal
    .slds-form-element.slds-form-element_1-col
    .slds-input-has-icon_left
    .slds-input__icon,
  .slds-form_stacked
    .slds-form-element_horizontal.slds-form-element_1-col
    .slds-input-has-icon_left
    .slds-input__icon {
    inset-inline-start: calc((50% - 33.333%) + var(--slds-g-spacing-1));
  }
}

@media (min-width: 48em) {
  .slds-form-element_horizontal .slds-form-element__label,
  .slds-form_horizontal .slds-form-element .slds-form-element__label,
  .slds-form_stacked .slds-form-element_horizontal .slds-form-element__label {
    float: inline-start;
    max-width: calc(33% - 1.25rem);
    flex-basis: calc(33% - 1.25rem);
    margin-block-end: 0;
    position: relative;
    z-index: 1;
  }

  .slds-form-element_horizontal .slds-form-element__control,
  .slds-form_horizontal .slds-form-element .slds-form-element__control,
  .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control {
    padding-inline-start: 33%;
    clear: none;
  }

  .slds-form-element_horizontal .slds-form-element__control .slds-form-element__control,
  .slds-form_horizontal .slds-form-element .slds-form-element__control .slds-form-element__control,
  .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control .slds-form-element__control {
    padding-inline-start: 0;
  }

  .slds-form-element_horizontal .slds-form-element__icon,
  .slds-form_horizontal .slds-form-element .slds-form-element__icon,
  .slds-form_stacked .slds-form-element_horizontal .slds-form-element__icon {
    float: inline-start;
    padding-block-start: var(--slds-g-spacing-1);
  }

  .slds-form-element_horizontal .slds-checkbox_standalone,
  .slds-form_horizontal .slds-form-element .slds-checkbox_standalone,
  .slds-form_stacked .slds-form-element_horizontal .slds-checkbox_standalone {
    padding-block: var(--slds-g-spacing-1);
    padding-inline: 0;
  }

  .slds-form-element_horizontal .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label,
  .slds-form-element_horizontal .slds-radio .slds-form-element__label,
  .slds-form_horizontal
    .slds-form-element
    .slds-checkbox:not(.slds-checkbox_stacked)
    .slds-form-element__label,
  .slds-form_horizontal .slds-form-element .slds-radio .slds-form-element__label,
  .slds-form_stacked
    .slds-form-element_horizontal
    .slds-checkbox:not(.slds-checkbox_stacked)
    .slds-form-element__label,
  .slds-form_stacked .slds-form-element_horizontal .slds-radio .slds-form-element__label {
    position: relative;
    float: none;
    max-width: 100%;
    width: auto;
  }

  .slds-form-element_horizontal .slds-form-element__row .slds-form-element__label,
  .slds-form-element_horizontal .slds-form-element__row .slds-form-element__control,
  .slds-form-element_horizontal .slds-dueling-list__column .slds-form-element__label,
  .slds-form_horizontal .slds-form-element .slds-form-element__row .slds-form-element__label,
  .slds-form_horizontal .slds-form-element .slds-form-element__row .slds-form-element__control,
  .slds-form_horizontal .slds-form-element .slds-dueling-list__column .slds-form-element__label,
  .slds-form_stacked .slds-form-element_horizontal .slds-form-element__row .slds-form-element__label,
  .slds-form_stacked .slds-form-element_horizontal .slds-form-element__row .slds-form-element__control,
  .slds-form_stacked .slds-form-element_horizontal .slds-dueling-list__column .slds-form-element__label {
    width: auto;
    max-width: 100%;
    flex-basis: auto;
    float: none;
    position: relative;
    padding-inline-start: 0;
    margin-block-end: 0;
  }

  .slds-form-element_horizontal .slds-dueling-list,
  .slds-form_horizontal .slds-form-element .slds-dueling-list,
  .slds-form_stacked .slds-form-element_horizontal .slds-dueling-list {
    clear: none;
  }

  .slds-form-element_horizontal .slds-input-has-icon_left .slds-input__icon,
  .slds-form_horizontal .slds-form-element .slds-input-has-icon_left .slds-input__icon,
  .slds-form_stacked .slds-form-element_horizontal .slds-input-has-icon_left .slds-input__icon {
    inset-inline-start: calc(33% + 0.75rem);
  }

  .slds-form-element_horizontal .slds-input-has-icon_left-right .slds-input__icon_left,
  .slds-form_horizontal .slds-form-element .slds-input-has-icon_left-right .slds-input__icon_left,
  .slds-form_stacked .slds-form-element_horizontal .slds-input-has-icon_left-right .slds-input__icon_left {
    inset-inline-start: calc(33% + 0.75rem);
  }
}

.slds-form-element_horizontal .slds-form-element__help,
.slds-form_horizontal .slds-form-element .slds-form-element__help,
.slds-form_stacked .slds-form-element_horizontal .slds-form-element__help {
  margin-inline-start: 33%;
}

/**
 * Bugfix: Avoid a bug where longer length labels may overlap with form element below
 * - Ensure the form element is cleared to reset the `float: inline-start` of the label within the form element
 */
@media (min-width: 48em) {
  .slds-form-element_horizontal.slds-form-element::after,
  .slds-form_horizontal .slds-form-element::after,
  .slds-form_stacked .slds-form-element_horizontal.slds-form-element::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* Compound */
.slds-form-element_compound .slds-form-element__row {
  display: flex;
  margin-block-end: var(--slds-g-spacing-1);
  margin-inline-start: calc(var(--slds-g-spacing-1) * -1);
  margin-inline-end: calc(var(--slds-g-spacing-1) * -1);
}

.slds-form-element_compound .slds-form-element__row .slds-form-element__label {
  padding-block-start: 0;
}

.slds-form-element_compound .slds-form-element {
  padding-inline-start: var(--slds-g-spacing-1);
  padding-inline-end: var(--slds-g-spacing-1);
}

/* Form Layout Compound */
.slds-form_compound {
  width: 100%;
}

.slds-form_compound > .slds-form-element {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.slds-form_compound .slds-form-element__row {
  display: flex;
  margin-block-start: 0;
  margin-block-end: var(--slds-g-spacing-1);
  margin-inline-start: 0;
  margin-inline-end: 0;
}

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

.slds-form_compound .slds-form-element__row .slds-form-element {
  margin-block-end: 0;
}

.slds-form_compound .slds-form-element__row .slds-form-element + .slds-form-element {
  padding-inline-start: var(--slds-g-spacing-2);
  margin-block-start: 0;
}

.slds-form_compound .slds-form-element__row .slds-form-element__label {
  padding-block-start: 0;
}

/* record-detail */
.slds-form__row {
  display: flex;
  flex-wrap: wrap;
  margin-inline-start: calc(var(--slds-g-spacing-3) * -1);
  margin-inline-end: calc(var(--slds-g-spacing-3) * -1);
}

.slds-form__item {
  display: flex;
  flex: 1 1 0%;
  min-width: 280px;
  padding-inline-start: var(--slds-g-spacing-3);
  padding-inline-end: var(--slds-g-spacing-3);
}

.slds-is-edited {
  background: var(--slds-g-color-palette-yellow-90);
}

.slds-is-edited .slds-form-element__undo {
  inset-block-start: -1.25rem;
  inset-inline-end: var(--slds-g-spacing-1);
}

.slds-form-element__undo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}