// ============================================================================
// :: Form
// ============================================================================

// ============================================================================
// :: Root
// ============================================================================
// .l-form {}

// ============================================================================
// :: Elements
// ============================================================================
.l-form__header {
  margin-bottom: 3rem;
}

.l-form__grid {
  +.l-form__grid {
    margin-top: $grid-spacing-mobile-default;

    @include respond-at($breakpoint-tablet-default) {
      margin-top: $grid-spacing-tablet-default;
    }

    @include respond-at($breakpoint-desktop-default) {
      margin-top: $grid-spacing-desktop-default;
    }

    @include respond-at($breakpoint-desktop-large) {
      margin-top: $grid-spacing-desktop-large;
    }
  }
}

.l-form__fieldset {
  // Disable all default fieldset styling
  margin: 0;
  padding: 0;

  border: 0;

  +.l-form__fieldset {
    margin-top: 2.5rem;
  }
}

.l-form__fieldset-title {
  width: 100%;
  margin-bottom: 2rem;

  font-size: $font-size-1x-large;
  font-weight: $font-weight-bold;

  @include respond-at($breakpoint-tablet-default) {
    margin-bottom: 3rem;
  }

  @include respond-at($breakpoint-desktop-default) {
    margin-bottom: 4rem;
  }
}

.l-form__submit {
  margin-top: 3rem;

  @include respond-at($breakpoint-tablet-default) {
    margin-top: 4rem;
  }

  @include respond-at($breakpoint-desktop-default) {
    margin-top: 5rem;
  }
}

// ============================================================================
// :: Modifiers - submit
// ============================================================================

.l-form__submit--full-width {
  @include respond-to($breakpoint-mobile-default) {
    width: 100%;

    .a-button {
      width: 100%;
      margin-bottom: 1.5rem;

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

.l-form__grid--align-fields {
  align-items: flex-end;

  // makes the buttons the same height as the input fields
  .a-button {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.l-form__submit--align-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  @include respond-at($breakpoint-tablet-default) {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  >* {
    margin-bottom: 2rem;

    @include respond-at($breakpoint-tablet-default) {
      margin-bottom: 0;
      margin-right: 3rem;
    }

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

      @include respond-at($breakpoint-tablet-default) {
        margin-right: 0;
      }
    }
  }
}

// ============================================================================
// :: Modifiers - Fieldset Title
// ============================================================================

// double selector to guarantee a higher specificity. Needed to make sure the styling defined in the extend is applied.

legend.l-form__fieldset-title.l-form__fieldset-title--small,
.l-form__fieldset-title.l-form__fieldset-title--small {
  @extend %__h5-default;

  padding-bottom: 1rem;
  margin-bottom: 2rem;

  border-bottom: $border-width-base solid $border-color-1x-light;
}

// Limit form grids to max 2 columns when text zoom is large
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .l-form__grid {
    [class*="l-grid__col"] {
      // Mobile/tablet: full width
      width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

      @include respond-at($breakpoint-tablet-default) {
        width: calc(#{$_grid-col-12} - #{$grid-spacing-tablet-default});
      }

      // Desktop: 6/12 → at most two columns per row
      @include respond-at($breakpoint-desktop-default) {
        width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-default});
      }

      @include respond-at($breakpoint-desktop-large) {
        width: calc(#{$_grid-col-6} - #{$grid-spacing-desktop-large});
      }
    }
  }
}

// html[data-text-zoom="xlarge"] {
//   .l-form__grid {
//     [class*="l-grid__col"] {
//       width: calc(#{$_grid-col-12} - #{$grid-spacing-mobile-default});

//       @include respond-at($breakpoint-desktop-default) {
//         width: calc(#{$_grid-col-12} - #{$grid-spacing-desktop-default});
//       }

//       @include respond-at($breakpoint-desktop-large) {
//         width: calc(#{$_grid-col-12} - #{$grid-spacing-desktop-default});
//       }
//     }
//   }
// }