/*
 * @file
 * Granular layout utility classes.
 */

/* Gutters. */
.gutter-column--0 {
  column-gap: 0;
}

.gutter-column--s {
  column-gap: var(--spacing-xs);
}

.gutter-column--m {
  column-gap: var(--spacing-m);
}

.gutter-column--l {
  column-gap: var(--spacing-xl);
}

.gutter-row--0 {
  row-gap: 0;
}

.gutter-row--s {
  row-gap: var(--spacing-xs);
}

.gutter-row--m {
  row-gap: var(--spacing-m);
}

.gutter-row--l {
  row-gap: var(--spacing-xl);
}

/* Margins. */
.margin-top--0 {
  &,
  &:is(:first-child, :last-child) {
    margin-top: 0;
  }
}

.margin-top--s {
  &,
  &:is(:first-child, :last-child) {
    margin-top: var(--spacing-m);
  }
}

.margin-top--m {
  &,
  &:is(:first-child, :last-child) {
    margin-top: var(--spacing-component-internal);
  }
}

.margin-top--l {
  &,
  &:is(:first-child, :last-child) {
    margin-top: var(--spacing-component);
  }
}

.margin-bottom--0 {
  &,
  &:is(:first-child, :last-child) {
    margin-bottom: 0;
  }
}

.margin-bottom--s {
  &,
  &:is(:first-child, :last-child) {
    margin-bottom: var(--spacing-m);
  }
}

.margin-bottom--m {
  &,
  &:is(:first-child, :last-child) {
    margin-bottom: var(--spacing-component-internal);
  }
}

.margin-bottom--l {
  &,
  &:is(:first-child, :last-child) {
    margin-bottom: var(--spacing-component);
  }
}

/* Paddings. */
.padding-top--0 {
  padding-top: 0;
}

.padding-top--s {
  padding-top: var(--spacing-m);
}

.padding-top--m {
  padding-top: var(--spacing-component-internal);
}

.padding-top--l {
  padding-top: var(--spacing-component);
}

.padding-bottom--0 {
  padding-bottom: 0;
}

.padding-bottom--s {
  padding-bottom: var(--spacing-m);
}

.padding-bottom--m {
  padding-bottom: var(--spacing-component-internal);
}

.padding-bottom--l {
  padding-bottom: var(--spacing-component);
}