@use "mixins";

.zn-gap {
  @include mixins.gap();
  @include mixins.padding();

  display: flex;
  flex-wrap: wrap;
}

.zn-gap-in {
  @include mixins.gap();
  display: flex;
  flex-wrap: wrap;
}

.zn-gap-in-sm {
  @include mixins.gap-sm();
}

.zn-gap-md {
  gap: mixins.spacing(md);
}

.zn-gap-inner {
  @include mixins.gap();
}

.zn-gap-ism {
  @include mixins.gap();
  --zn-gap: #{mixins.spacing(sm)};
}


.zn-gap-ixs {
  @include mixins.gap();
  --zn-gap: #{mixins.spacing(xs)};
}

.zn-max-hide {
  max-height: 100%;
  overflow: hidden;
}

.zn-hide-empty:empty {
  display: none;
}

.zn-nopoint {
  pointer-events: none;
}


.form-spacing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zn-spacing-medium) var(--zn-spacing-small);

  @include mixins.media-query(md) {
    grid-template-columns: repeat(6, 1fr);
  }
}

.form-spacing ~ .form-spacing {
  margin-top: var(--zn-spacing-medium);
}

.form-spacing > * {
  grid-column: span 6 / span 6;
}

.form-spacing > *[span="1"] {
  @include mixins.media-query(md) {
    grid-column: span 1 / span 1;
  }
}

.form-spacing > *[span="2"] {
  @include mixins.media-query(md) {
    grid-column: span 2 / span 2;
  }
}

.form-spacing > *[span="3"] {
  @include mixins.media-query(md) {
    grid-column: span 3 / span 3;
  }
}

.form-spacing > *[span="4"] {
  @include mixins.media-query(md) {
    grid-column: span 4 / span 4;
  }
}

.form-spacing > *[span="5"] {
  @include mixins.media-query(md) {
    grid-column: span 5 / span 5;
  }
}