@mixin featureForm() {
  $group-border-width: 3px;
  $panel-background-color: var(--calcite-color-background);
  $text-element-line-height: 1.375;

  .geoscene-feature-form {
    background-color: $panel-background-color;
    padding: var(--geoscene-widget-padding);

    .geoscene-feature-utility-network-associations,
    .geoscene-feature-form-utility-network-association-list {
      margin-block-end: $cap-spacing;
    }

    .geoscene-feature-utility-network-associations {
      .geoscene-feature-element-info {
        &__description {
          color: #6e6e6e;
        }

        h5 {
          font-size: inherit;
        }
      }
    }

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

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

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

    &__list-observer {
      position: relative;
      bottom: 20px;
      z-index: 2;
      text-align: center;
    }

    &__related-records {
      &_header {
        display: flex;
        margin-bottom: $cap-spacing--half;

        span {
          flex-grow: 1;
        }
      }

      &_label {
        calcite-notice,
        .geoscene-feature-form__description-text {
          margin-bottom: $cap-spacing--half;
        }
      }

      &_list {
        margin-bottom: $cap-spacing--half;
        min-height: 40px;
      }
    }
  }

  label.geoscene-feature-form__label {
    gap: 0.5em;
    margin-bottom: $cap-spacing;
  }

  .geoscene-feature-form__label {
    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;
    }
  }

  .geoscene-feature-form__disabled-notice {
    margin-bottom: $cap-spacing--plus-half;
  }

  .geoscene-feature-form__form-header {
    margin-bottom: $cap-spacing;

    .geoscene-feature-form__description-text ~ .geoscene-widget__heading {
      margin-bottom: 0;
    }
  }

  .geoscene-feature-form__input {
    width: 100%;

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

  textarea.geoscene-feature-form__input {
    resize: vertical;
  }

  .geoscene-feature-form__input--disabled {
    background-color: var(--calcite-color-background);
    font-weight: var(--calcite-font-weight-medium);
  }

  .geoscene-feature-form__field-error-message {
    padding: $side-spacing--half 0;
    font-size: $font-size--small;
  }

  .geoscene-feature-form__date-input-container {
    display: flex;
    flex-direction: column;

    .geoscene-feature-form__input {
      margin-bottom: $cap-spacing--quarter;
    }

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

  .geoscene-feature-form__input--radio-group {
    display: flex;
    flex-direction: column;
  }

  .geoscene-feature-form__input--radio-label {
    display: flex;
    align-items: center;
  }

  .geoscene-feature-form__input--switch {
    margin: $side-spacing--half 0;
  }

  .geoscene-feature-form__group {
    margin: 0 0 $cap-spacing 0;
    margin-inline: -10px; // offset to align FeatureForm elements
    background-color: inherit;
  }

  .geoscene-feature-form__group--sequential {
    border-bottom: none;
    border-inline-start: $group-border-width solid $border-color;
  }

  .geoscene-feature-form__group--active {
    border-inline-start-color: $border-color--active;
  }

  .geoscene-feature-form__text-element {
    line-height: $text-element-line-height;
    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: 1px solid var(--calcite-color-border-3);
      border-radius: $border-radius;
      background-color: var(--calcite-color-foreground-3);
      padding: 0.25em;
      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: 4px;
      line-height: $text-element-line-height;
      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: 4px;
      line-height: $text-element-line-height;
      color: var(--calcite-color-text-2);
      font-size: var(--calcite-font-size--1);
      font-weight: var(--calcite-font-weight-medium);
    }

    p {
      margin-bottom: 16px;
      line-height: $text-element-line-height;
      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"] {
    .geoscene-feature-form__date-input-part {
      &:first-child .geoscene-feature-form__input {
        border-right: 1px solid $border-color;
        border-left: none;
      }
    }
  }
}

@if $include_FeatureForm == true {
  @include featureForm();
}