@use 'sass:map';
@import '../../../../style/core/utilities.scss';
@import '../../Field/style/field-sizes.scss';

$breakpoints: map.merge(
  $breakpoints,
  (
    'xx-small': 15em,
  )
);

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

.dnb-forms-field-block {
  &__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;
      label.dnb-form-label {
        max-width: none;
      }
    }
    @include 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;

    &__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
    }
  }

  &__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 allBelow(small) {
      & > .dnb-form-label {
        margin-bottom: calc(var(--label-margin) + 0.5rem);
      }
    }
    @include 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 {
        --help-button-indent-width: 0;

        // Align to how the FormStatus looks
        .dnb-section {
          --rounded-corner: 0.25rem;
          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 allAbove(small) {
      .dnb-section {
        margin-top: 0.5rem;
        margin-bottom: 0;
      }
    }
  }

  &__status {
    grid-area: status;

    .dnb-form-status__shell {
      margin-top: 0.5rem; // set margin-top on shell, so we can animate the height
      max-width: 60ch; // to enhance readability
    }

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

  &__contents {
    grid-area: contents;

    display: flex;
    width: 100%;

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

  &__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);

    @include 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 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.
  @include allBelow(x-small) {
    &__composition > &__grid > .dnb-forms-submit-indicator {
      display: none;
    }
  }
  @include allAbove(x-small) {
    &__composition > &__grid > &__contents .dnb-forms-submit-indicator {
      display: none;
    }
  }
}