/*
 * FormRow component
 *
 */

@import '../../../style/core/utilities.scss';

.dnb-form-row {
  &,
  &.dnb-section {
    display: flex;
  }
  align-items: baseline;

  &__content {
    display: inline-flex;
    flex: 1; // to help #input stretch
    width: 100%; // to help #input stretch
  }

  // for horizontal direction
  &:not(#{&}--vertical) {
    & > .dnb-form-row__content {
      align-items: baseline;

      .dnb-form-label {
        white-space: nowrap;
      }

      &--wrap {
        // so components gets wrapper on overflow, we use block here
        display: block;
      }

      // TODO: We may consider to wrap horizontal direction to vertical
    }

    @media screen and (max-width: 40em) {
      flex-direction: column;
      align-items: flex-start;

      & > .dnb-form-label {
        margin-bottom: 0.5rem;
      }

      & > .dnb-form-row__content {
        flex-direction: column;

        & > .dnb-form-label {
          margin-top: 1rem;
        }
      }
    }
  }
  &--centered#{&}:not(#{&}--vertical) &__content {
    @include allAbove(small) {
      align-items: center;
    }
  }

  // for vertical direction
  &--vertical > .dnb-form-row__label {
    margin-bottom: 0.5rem;
  }
  &--vertical > &__content,
  &--vertical#{&}:not(#{&}--nested) {
    flex-direction: column;
  }

  // TODO: we may consider this to be included with a prop later on

  &--vertical-label {
    flex-direction: column;
  }

  > .dnb-form-status {
    margin: 0.5rem 0;
  }

  > .dnb-form-row__label {
    &--vertical {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    &--vertical ~ .dnb-form-row__content {
      grid-column: column1-start / column1-end;
    }
  }

  &__label-dummy {
    margin: 0;
  }

  // reset the fieldset
  &__fieldset,
  .dnb-core-style &__fieldset {
    @include fieldsetReset();

    width: 100%;
  }
}