@use '../../../../style/core/utilities.scss' as utilities;
@use '../../Field/style/field-sizes.scss';

fieldset.dnb-forms-field-block {
  @include utilities.fieldsetReset();
}

.dnb-forms-field-block {
  &__label__description {
    color: var(--token-color-text-neutral-alternative);
    font-size: var(--font-size-small);
  }

  &__grid {
    display: grid;

    // Vertical layout
    grid-template-columns: minmax(
      min-content,
      var(--block-content-width, auto)
    );
    grid-template-areas:
      'label'
      'help'
      'contents'
      'indicator'
      'status';
  }

  // Align label vertically with the content (input etc.)
  --label-margin: 0.25rem;
  &--label-height-small {
    --label-margin: 0;
  }
  &--label-height-medium {
    --label-margin: 0.5rem;
  }
  &--label-height-large {
    --label-margin: 0.7rem;
  }

  &--width {
    &-stretch {
      flex-grow: 1;
    }
    @include utilities.allAbove(x-small) {
      &-custom {
        width: calc(var(--dnb-forms-field-block-width));
      }
      &-small {
        width: var(--forms-field-width--small);
      }
      &-medium {
        width: var(--forms-field-width--medium);
      }
      &-large {
        width: var(--forms-field-width--large);
      }
    }
  }

  &:not([class*='--content-width']) {
    --max-width: var(--forms-field-label-max-width--large);
  }

  &__label,
  &__label.dnb-form-label {
    grid-area: label;
    display: flex;
    max-width: var(--forms-field-label-max-width--large);
    align-items: center;

    margin-right: 0;

    .dnb-forms-field-block--width-stretch & {
      max-width: none;
    }

    &__description {
      vertical-align: top;
    }

    &__content:has(+ .dnb-help-button),
    &__description:has(+ .dnb-help-button) {
      margin-right: 0.5rem;
    }

    &:has(&__description) .dnb-help-button,
    &:has(&__description):not(&:has(+ .dnb-help-button)) &__content {
      margin-right: 0.3em; // Keep the description closer to the label
    }
    .dnb-help-button__word-joiner {
      margin-left: 0.45em; // Simulate a white-space

      // Force help button to line break with last word
      white-space: nowrap;
      &::before {
        content: '\2060';
      }
    }
  }

  &__grid#{&}--layout-vertical {
    flex-wrap: wrap;
    & > .dnb-form-label {
      margin-bottom: 0.5rem;
    }
  }

  // Horizontal layout
  &__grid#{&}--layout-horizontal &__label {
    margin-right: 1rem;
  }
  &__grid#{&}--layout-horizontal {
    & > .dnb-form-label {
      margin-top: var(--label-margin);
      margin-bottom: var(--label-margin);
    }

    @include utilities.allBelow(small) {
      & > .dnb-form-label {
        margin-bottom: calc(var(--label-margin) + 0.5rem);
      }
    }
    @include utilities.allAbove(small) {
      grid-template-columns:
        minmax(
          var(--dnb-forms-field-block-layout-width-min, min-content),
          var(--dnb-forms-field-block-layout-width-max, max-content)
        )
        auto;

      // When stretching the "help" over two columns,
      // it influences the "label" width when shown,
      // and there is not layoutOptions defined.
      grid-template-areas:
        'label contents'
        '. help'
        '. indicator'
        '. status';

      .dnb-help-button__content {
        // Align to how the FormStatus looks
        .dnb-section {
          --rounded-corner: var(--token-radius-sm);
          align-self: flex-start; // Do not stretch the content
        }
      }

      .dnb-forms-field-block__contents {
        align-self: end;
      }
    }
  }

  &__indicator {
    grid-area: indicator;

    position: relative;
    .dnb-forms-submit-indicator__content {
      position: absolute;
    }
  }

  &__help {
    grid-area: help;
    display: flex;
    flex-flow: column;

    .dnb-section {
      margin-bottom: 1rem;

      & > .dnb-p--lead {
        margin-bottom: 0.5rem;
      }
    }
  }
  &__grid#{&}--layout-horizontal &__help {
    @include utilities.allAbove(small) {
      .dnb-section {
        margin-top: 0.5rem;
        margin-bottom: 0;
      }
    }
  }

  &__status {
    grid-area: status;

    .dnb-form-status__shell {
      margin-top: var(
        --field-block-status-margin-top,
        0.5rem
      ); // set margin-top on shell, so we can animate the height
      margin-bottom: var(--field-block-status-margin-bottom, 0);
      max-width: var(--prose-max-width); // to enhance readability
    }

    @include utilities.allBelow(xx-small) {
      width: 90%;
    }
  }

  &--status-position-above &__grid {
    grid-template-areas:
      'label'
      'help'
      'status'
      'contents'
      'indicator';
  }

  &--status-position-above {
    --field-block-status-margin-top: 0;
    --field-block-status-margin-bottom: 0.5rem;
  }

  &--status-position-above &__grid#{&}--layout-horizontal {
    @include utilities.allAbove(small) {
      grid-template-areas:
        'label status'
        '. contents'
        '. help'
        '. indicator';
    }
  }

  &__contents {
    grid-area: contents;

    display: flex;
    width: 100%;

    &--width {
      &-stretch {
        width: 100%;
      }
      &-custom {
        --field-block-content-width: calc(
          var(--dnb-forms-field-block-content-width)
        );
      }
      &-small {
        --field-block-content-width: var(--forms-field-width--small);
      }
      &-medium {
        --field-block-content-width: var(--forms-field-width--medium);
      }
      &-large {
        --field-block-content-width: var(--forms-field-width--large);
      }

      @include utilities.allAbove(x-small) {
        &-custom,
        &-small,
        &-medium,
        &-large {
          max-width: var(--field-block-content-width, none);
        }
      }

      @include utilities.allAbove(small) {
        &-custom,
        &-small,
        &-medium,
        &-large {
          width: var(--field-block-content-width, max-content);
        }
      }
    }
  }

  &__composition--vertical &__contents {
    display: flex;
    flex-flow: column;
    row-gap: var(--spacing-x-small);
  }

  &__composition--horizontal &__contents {
    display: flex;
    flex-flow: row;
    column-gap: var(--spacing-small);

    // Support wrapping
    flex-wrap: wrap;
    row-gap: var(--spacing-small);
    & > .dnb-forms-field-block--width-stretch {
      flex: 1;
    }

    @include utilities.allAbove(x-small) {
      align-items: flex-end; // To support fields with labels of different size

      &[class*='align-center'] {
        align-items: center; // To support fields without labels, but different heights
      }
    }
    @include utilities.allBelow(x-small) {
      row-gap: var(--spacing-x-small);
      flex-flow: column;
    }
  }

  // Because we want to hide / show the indicator responsively,
  // we render both, but hide the one we don't want to show.
  // Use the specific __indicator class to avoid hiding the
  // SubmitIndicator inside Form.SubmitButton.
  @include utilities.allBelow(x-small) {
    &__composition > &__grid > .dnb-forms-field-block__indicator {
      display: none;
    }
  }
  @include utilities.allAbove(x-small) {
    &__composition
      > &__grid
      > &__contents
      .dnb-forms-field-block__indicator {
      display: none;
    }
  }
}