@use "../commons/mixins";

.form-box {
  display: flex;
  @include mixins.flex-direction(column, var(--gap-default));

  > div,
  > .form-box-item {
    display: block;

    > label {
      display: block;
      margin-bottom: var(--gap-xs);
      white-space: nowrap;
      font-weight: bold;
      border: 1px solid transparent;
    }

    @media all and (pointer: coarse) {
      margin-bottom: var(--gap-default);

      > label {
        margin-bottom: var(gap-xxs);
      }
    }
  }
}

.form-box-inline {
  display: inline-flex;
  flex-wrap: wrap;
  @include mixins.flex-direction(row, var(--gap-sm));

  > div,
  > .form-box-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    > label {
      display: block;
      white-space: nowrap;
      font-weight: bold;
      border: 1px solid transparent;
      padding-left: var(--gap-sm);
      padding-right: var(--gap-sm);
    }
  }
}