@mixin batchAttributeForm() {
  .esri-batch-attribute-form {
    background-color: var(--calcite-color-background);
    padding: var(--esri-widget-padding);

    &__notice-error {
      margin: 0 0 var(--calcite-spacing-xxl);
    }

    &__form {
      display: flex;
      flex-direction: column;
    }

    &__centered-button {
      align-self: center;
    }

    &__description-text {
      color: $interactive-font-color;
    }

    &__label {
      @include wordbreak();

      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: space-between;
      transition:
        opacity 250ms,
        margin 250ms;
      opacity: 1;
      margin-bottom: $cap-spacing--half;

      &:last-child {
        margin-bottom: 0;
      }

      &-text-content {
        @include wordbreak();

        display: flex;
        align-items: center;
      }
    }

    &__input--switch {
      margin: $side-spacing--half 0;
    }

    &__input--radio-label {
      display: flex;
      align-items: center;
    }

    &__input--radio-group {
      display: flex;
      flex-direction: column;
    }

    &__input--radio-placeholder {
      color: var(--calcite-color-text-3);
      font-style: italic;
    }

    &__form-header {
      margin-bottom: $cap-spacing;

      .esri-batch-attribute-form__description-text ~ .esri-widget__heading {
        margin-bottom: 0;
      }
    }

    &__input {
      width: 100%;

      &:focus {
        outline: var(--calcite-spacing-base) solid var(--calcite-color-brand);
        outline-offset: -2px;
      }
    }

    &__input--disabled {
      background-color: var(--calcite-color-background);
      font-weight: var(--calcite-font-weight-medium);
    }

    &__individual-element {
      margin: var(--calcite-spacing-xxl) 0;
    }

    &__date-input-container {
      display: flex;
      flex-direction: column;
      gap: var(--calcite-spacing-sm);

      .esri-batch-attribute-form__input {
        margin-bottom: $cap-spacing--quarter;
      }

      :last-child {
        margin-bottom: 0;
      }
    }

    &__group {
      margin: 0 0 $cap-spacing 0;
      margin-inline: calc(var(--calcite-spacing-md) * -1); // offset to align form elements
      background-color: inherit;
    }

    &__group--sequential {
      border-bottom: none;
      border-inline-start: 3px solid $border-color;
    }

    &__block {
      margin-inline: -10px;
    }

    &__text-element-input {
      line-height: var(--calcite-font-line-height-relative-snug);
      color: var(--calcite-color-text-3);
      font-size: var(--calcite-font-size--1);
      font-weight: var(--calcite-font-weight-normal);

      a {
        display: inline;
        position: relative;
        transition:
          background-color,
          block-size,
          border-color,
          box-shadow,
          color,
          inset-block-end,
          inset-block-start,
          inset-inline-end,
          inset-inline-start inset-size,
          opacity,
          outline-color,
          transform var(--calcite-animation-timing) ease-in-out 0s,
          outline 0s,
          outline-offset 0s;
        border-style: none;
        background-color: transparent;
        background-image:
          linear-gradient(currentColor, currentColor),
          linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));
        background-position-x: 0%, 100%;
        background-position-y: min(1.5em, 100%);
        background-repeat: no-repeat, no-repeat;
        background-size:
          0% 1px,
          100% 1px;
        padding: 0;
        text-decoration: none;
        color: var(--calcite-color-text-link);

        &:hover,
        &:focus {
          background-size:
            100% 1px,
            100% 1px;
        }

        &:active {
          background-size:
            100% 2px,
            100% 2px;
        }

        &.calcite--rtl {
          background-position:
            100% 100%,
            100% 100%;
        }
      }

      code {
        border: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
        border-radius: var(--calcite-corner-radius-xs);
        background-color: var(--calcite-color-foreground-3);
        padding: var(--calcite-spacing-xxs);
        white-space: normal;
        word-break: break-word;
        color: var(--calcite-color-text-2);
        font-family: var(--calcite-code-family);
        font-size: 85%;
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        margin-bottom: var(--calcite-spacing-xxs);
        line-height: var(--calcite-font-line-height-relative-snug);
        color: var(--calcite-color-text-1);
        font-size: var(--calcite-font-size-0);
        font-weight: var(--calcite-font-weight-bold);
      }

      h5 {
        font-weight: var(--calcite-font-weight-medium);
      }

      h6 {
        margin-bottom: var(--calcite-spacing-xxs);
        line-height: var(--calcite-font-line-height-relative-snug);
        color: var(--calcite-color-text-2);
        font-size: var(--calcite-font-size--1);
        font-weight: var(--calcite-font-weight-medium);
      }

      p {
        margin-bottom: var(--calcite-spacing-lg);
        line-height: var(--calcite-font-line-height-relative-snug);
        color: var(--calcite-color-text-3);
        font-size: var(--calcite-font-size--1);
        font-weight: var(--calcite-font-weight-normal);
      }

      strong {
        font-weight: var(--calcite-font-weight-bold);
      }
    }
  }

  [dir="rtl"] {
    .esri-batch-attribute-form__date-input-part {
      &:first-child .esri-batch-attribute-form__input {
        border-right: var(--calcite-spacing-px) solid $border-color;
        border-left: none;
      }
    }
  }
}

@if $include_BatchAttributeForm == true {
  @include batchAttributeForm();
}