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

.dnb-forms-field-array-selection {
  --row-gap: 0.5rem;
  &--variant-button {
    --row-gap: 1rem;
  }

  &--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: 1rem;
    row-gap: var(--row-gap); // for when wrapped
  }

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