spacing.css

@import '#app/imports';

.H,
.V,
.El {
  display: grid;
}

.H,
.El-horizontal {
  grid-auto-flow: column;
  justify-content: flex-start;
}

.V {
  align-content: flex-start;
}

/**
 * fullWidth
 */

.H-fullWidth,
.V-fullWidth,
.El-fullWidth {
  width: 100%;
}

/**
 * fullHeight
 */

.H-fullHeight,
.V-fullHeight,
.El-fullHeight {
  height: 100%;
}

/**
 * padded
 */

/* size: medium */

.H.H-padded,
.V.V-padded,
.El.El-padded {
  padding: var(--size-spacing-medium);
}

/* size: small */

.H-size-small.H-padded,
.V-size-small.V-padded,
.El-size-small.El-padded {
  padding: var(--size-spacing-small);
}

/* size: large */

.H-size-large.H-padded,
.V-size-large.V-padded,
.El-size-large.El-padded {
  padding: var(--size-spacing-large);

  @media (--mobile-small) {
    padding: var(--size-spacing-medium);
  }
}

/* size: xlarge */

.H-size-xlarge.H-padded,
.V-size-xlarge.V-padded,
.El-size-xlarge.El-padded {
  padding: var(--size-spacing-xlarge);

  @media (--mobile-large) {
    padding: var(--size-spacing-large);
  }

  @media (--mobile-small) {
    padding: var(--size-spacing-medium);
  }
}

/**
 * paddedH
 */

/* paddedH: medium */

.H-paddedH-medium,
.V-paddedH-medium,
.El-paddedH-medium {
  padding-left: var(--size-spacing-medium);
  padding-right: var(--size-spacing-medium);
}

/* paddedH: large */

.H-paddedH-large,
.V-paddedH-large,
.El-paddedH-large {
  padding-left: var(--size-spacing-large);
  padding-right: var(--size-spacing-large);

  @media (--mobile-small) {
    padding-left: var(--size-spacing-medium);
    padding-right: var(--size-spacing-medium);
  }
}

/* paddedH: xlarge */

.H-paddedH-xlarge,
.V-paddedH-xlarge,
.El-paddedH-xlarge {
  padding-left: var(--size-spacing-xlarge);
  padding-right: var(--size-spacing-xlarge);

  @media (--mobile-large) {
    padding-left: var(--size-spacing-large);
    padding-right: var(--size-spacing-large);
  }

  @media (--mobile-small) {
    padding-left: var(--size-spacing-medium);
    padding-right: var(--size-spacing-medium);
  }
}

/**
 * paddedV
 */

/* paddedV: medium */

.H-paddedV-medium,
.V-paddedV-medium,
.El-paddedV-medium {
  padding-top: var(--size-spacing-medium);
  padding-bottom: var(--size-spacing-medium);
}

/* paddedV: small */

.H-paddedV-small,
.V-paddedV-small,
.El-paddedV-small {
  padding-top: var(--size-spacing-small);
  padding-bottom: var(--size-spacing-small);
}

/* paddedV: large */

.H-paddedV-large,
.V-paddedV-large,
.El-paddedV-large {
  padding-top: var(--size-spacing-large);
  padding-bottom: var(--size-spacing-large);

  @media (--mobile-small) {
    padding-top: var(--size-spacing-medium);
    padding-bottom: var(--size-spacing-medium);
  }
}

/* paddedV: xlarge */

.H-paddedV-xlarge,
.V-paddedV-xlarge,
.El-paddedV-xlarge {
  padding-top: var(--size-spacing-xlarge);
  padding-bottom: var(--size-spacing-xlarge);

  @media (--mobile-large) {
    padding-top: var(--size-spacing-large);
    padding-bottom: var(--size-spacing-large);
  }

  @media (--mobile-small) {
    padding-top: var(--size-spacing-medium);
    padding-bottom: var(--size-spacing-medium);
  }
}

/**
 * size
 */

/* size: medium */

.H,
.V {
  grid-gap: var(--size-spacing-medium);
}

.Vbr {
  margin-bottom: var(--size-spacing-medium);
}

/* size: xsmall */

.H-size-xsmall,
.V-size-xsmall {
  grid-gap: var(--size-spacing-xsmall);
}

.Vbr-size-xsmall {
  margin-bottom: var(--size-spacing-xsmall);
}

/* size: small */

.H-size-small,
.V-size-small {
  grid-gap: var(--size-spacing-small);
}

.Vbr-size-small {
  margin-bottom: var(--size-spacing-small);
}

/* size: large */

.H-size-large,
.V-size-large {
  grid-gap: var(--size-spacing-large);

  @media (--mobile-small) {
    grid-gap: var(--size-spacing-medium);
  }
}

.Vbr-size-large {
  margin-bottom: var(--size-spacing-large);

  @media (--mobile-small) {
    margin-bottom: var(--size-spacing-medium);
  }
}

/* size: xlarge */

.H-size-xlarge,
.V-size-xlarge {
  grid-gap: var(--size-spacing-xlarge);

  @media (--mobile-large) {
    grid-gap: var(--size-spacing-large);
  }

  @media (--mobile-small) {
    grid-gap: var(--size-spacing-medium);
  }
}

.Vbr-size-xlarge {
  margin-bottom: var(--size-spacing-xlarge);

  @media (--mobile-large) {
    margin-bottom: var(--size-spacing-large);
  }

  @media (--mobile-small) {
    margin-bottom: var(--size-spacing-medium);
  }
}

/**
 * wrap
 */

.H-wrap {
  grid-auto-flow: initial;
  justify-content: initial;
}

/**
 * wrapOn
 */

/* wrapOn: mobileLarge */

.H-wrapOn-mobileLarge {
  @media (--mobile-large) {
    grid-auto-flow: initial;
    justify-content: initial;
  }
}

.H-wrapOn-mobileMedium {
  @media (--mobile-medium) {
    grid-auto-flow: initial;
    justify-content: initial;
  }
}

.H-wrapOn-mobileSmall {
  @media (--mobile-small) {
    grid-auto-flow: initial;
    justify-content: initial;
  }
}

/**
 * aligned
 */

.H-aligned {
  justify-content: center;
}

.V-aligned {
  justify-content: center;
}

/**
 * alignedRight
 */

.H-alignedRight {
  justify-content: flex-end;
}

/**
 * alignedRightOff
 */

.H-alignedRightOff-mobileSmall {
  @media (--mobile-small-off) {
    justify-content: flex-end;
  }
}

/**
 * alignedOn
 */

.H-alignedOn-mobileLarge,
.V-alignedOn-mobileLarge {
  &.H,
  &.H-expanded,
  &.V {
    @media (--mobile-large) {
      justify-content: center;
    }
  }
}

/**
 * adjusted
 */

.H-adjusted {
  align-items: center;
}

/**
 * expanded
 */

.H-expanded {
  justify-content: space-between;
}

.V-expanded {
  align-content: space-between;
}

/**
 * distributed
 */

.H-distributed {
  grid-auto-columns: 1fr;
}