/* stylelint-disable at-rule-no-unknown */

@define-mixin grid-row {
  display: flex;
  flex-flow: row nowrap;

  &.hAlign--center {
    justify-content: center;
  }

  &.hAlign--start {
    justify-content: flex-start;
  }

  &.hAlign--end {
    justify-content: flex-end;
  }

  &.hAlign--space-around {
    justify-content: space-around;
  }

  &.hAlign--space-between {
    justify-content: space-between;
  }

  &.vAlign--top {
    align-items: flex-start;
  }

  &.vAlign--middle {
    align-items: center;
  }

  &.vAlign--bottom {
    align-items: flex-end;
  }

  &.colSpacingSmall {
    margin: 0 calc(-1 * var(--spacingSmall) / 2);
  }

  &.colSpacingMedium {
    margin: 0 calc(-1 * var(--spacingMedium) / 2);
  }

  &.colSpacingLarge {
    margin: 0 calc(-1 * var(--spacingLarge) / 2);
  }

  &.rowSpacingSmall {
    margin-bottom: var(--spacingSmall);
  }

  &.rowSpacingMedium {
    margin-bottom: var(--spacingMedium);
  }

  &.rowSpacingLarge {
    margin-bottom: var(--spacingLarge);
  }

  &.rowSpacingNone,
  &.lastRow {
    margin-bottom: 0;
  }
}

.root {
  display: block;
  box-sizing: border-box;
}

.startAtSmall {
  @mixin grid-row;
}

@media screen and (--mediumMin) {
  .startAtMedium {
    @mixin grid-row;
  }
}

@media screen and (--largeMin) {
  .startAtLarge {
    @mixin grid-row;
  }
}

@media screen and (--xLargeMin) {
  .startAtLarge {
    @mixin grid-row;
  }
}

.visualDebug {
  /* stylelint-disable-next-line color-named */
  outline: 0.0625rem dashed blue;
}

/* stylelint-enable at-rule-no-unknown */