
.width-100pc {
  width: 100%;
}

.width-800px {
  width: 800px;
}

.max-width-800px {
  max-width: 800px;
}

.gui-layout {
  display: grid;
  grid-auto-flow: row;
  align-items: baseline;
  grid-gap: $layout-vertical-spacing $layout-horizontal-spacing;

  margin-bottom: $layout-vertical-spacing;

  &.cols-1 {
    grid-template-columns: 1fr;
  }

  &.cols-1-1 {
    grid-template-columns: 1fr 1fr;
  }

  &.cols-1-2 {
    grid-template-columns: 1fr 2fr;
  }

  &.cols-1-3 {
    grid-template-columns: 1fr 3fr;
  }

  & .full-width {
    grid-column: auto / span 2;
  }
}

.gui-packed-row {
  display: flex;
  align-items: baseline;
  margin-bottom: $layout-vertical-spacing;

  & > .gui-packed-row, & > .gui-layout {
    margin-bottom: 0px;
  }

  & > * {
    margin-left: 0.5rem;
  }

  & > *:first-child {
    margin-left: 0;
  }

  & > .expand {
    flex-grow: 1;
  }

  & > .compact {
    flex-grow: 0;
    flex-shrink: 0;
  }
}

.gui-layout > .gui-packed-row {
  margin-bottom: 0px;
}
