.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  > * {
    margin-block: 0;
  }

  > * + * {
    margin-block-start: var(--size-4, 1rem);
  }
}

.stack-small {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  > * {
    margin-block: 0;
  }

  > * + * {
    margin-block-start: var(--size-0, 0.5rem);
  }
}

.box {
  padding: var(--size-1);
  border: var(--border-width-0) solid;
  border-radius: var(--border-radius-0);
}

/*
.box.invert {
  color: var(--color-light);
  background-color: var(--color-dark);
}
*/


.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-0);

  > :first-child {

    flex-grow: 1;
  }

  > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
    padding: var(--size-0);
    margin-block-start: 1em;
  }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-0, 1rem);
  justify-content: flex-start;
  align-items: center;

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

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

.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
  padding-inline-start: var(--size-0);
  padding-inline-end: var(--size-0);
}


.with-icon {
  display: inline-flex;
  align-items: center;

  .icon {
    margin-inline-end: var(--size--2);

    &.icon-after {
      margin-inline-start: var(--size--2);
      margin-inline-end: 0;
    }
  }
}

.icon {
  width: 1em;
  height: 1em;

  &.icon-big {
    width: 1.25em;
    height: 1.25em;
  }
}