@use '../../../../../style/core/utilities.scss' as utilities;

.dnb-forms-field-array-selection {
  --row-gap: var(--spacing-x-small);
  &--variant-button {
    --row-gap: var(--spacing-small);
  }

  &--options-layout--vertical &__options {
    display: flex;
    flex-flow: column;
    row-gap: var(--row-gap);
  }
  &--options-layout--vertical#{&}--layout-horizontal {
    .dnb-forms-field-block__label {
      align-items: flex-start;
    }
  }
  &--variant-button#{&}--options-layout--vertical#{&}--layout-horizontal {
    .dnb-forms-field-block__label {
      line-height: 2.5rem;
    }
  }

  &--options-layout--horizontal &__options {
    display: flex;
    flex-flow: row wrap;
    column-gap: var(--spacing-small);
    row-gap: var(--row-gap); // for when wrapped
  }

  @include utilities.allAbove(small) {
    .dnb-forms-field-block--layout-horizontal .dnb-form-label {
      margin-bottom: 0;
    }
  }
}