.vbx-grid-item {
  box-sizing: border-box;
  display: grid;
  width: fit-content;
  background-color: var(--vbx-grid-item--background-color, transparent);
  margin: var(--vbx-grid-item--margin, 0);
  padding: var(--vbx-grid-item--padding, 0);

  /* Direction modifiers */
  &[class*="--direction-row"] {
    & > .vbx-grid-item__content {
      flex-direction: row;
    }
  }

  &[class*="--direction-column"] {
    & > .vbx-grid-item__content {
      flex-direction: column;
    }
  }

  /* Width modifiers */
  &[class*="--width-full"] {
    width: 100%;
  }

  /* Wrap modifiers */
  &[class*="--flex-no-wrap"] {
    & > .vbx-grid-item__content {
      flex-wrap: nowrap;
    }
  }

  /* Alignment modifiers */
  &[class*="--justify-content-flex-start"] {
    & > .vbx-grid-item__content {
      justify-content: flex-start;
    }
  }
  &[class*="--justify-content-flex-end"] {
    & > .vbx-grid-item__content {
      justify-content: flex-end;
    }
  }
  &[class*="--justify-content-center"] {
    & > .vbx-grid-item__content {
      justify-content: center;
    }
  }
  &[class*="--justify-content-space-between"] {
    & > .vbx-grid-item__content {
      justify-content: space-between;
    }
  }
  &[class*="--justify-content-space-around"] {
    & > .vbx-grid-item__content {
      justify-content: space-around;
    }
  }
  &[class*="--justify-content-space-evenly"] {
    & > .vbx-grid-item__content {
      justify-content: space-evenly;
    }
  }

  &[class*="--align-items-flex-start"] {
    & > .vbx-grid-item__content {
      align-items: flex-start;
    }
  }
  &[class*="--align-items-center"] {
    & > .vbx-grid-item__content {
      align-items: center;
    }
  }
  &[class*="--align-items-flex-end"] {
    & > .vbx-grid-item__content {
      align-items: flex-end;
    }
  }
  &[class*="--align-items-stretch"] {
    & > .vbx-grid-item__content {
      align-items: stretch;
    }
  }
  &[class*="--align-items-baseline"] {
    & > .vbx-grid-item__content {
      align-items: baseline;
    }
  }

  &[class*="--align-content-flex-start"] {
    & > .vbx-grid-item__content {
      align-content: flex-start;
    }
  }
  &[class*="--align-content-center"] {
    & > .vbx-grid-item__content {
      align-content: center;
    }
  }
  &[class*="--align-content-flex-end"] {
    & > .vbx-grid-item__content {
      align-content: flex-end;
    }
  }
  &[class*="--align-content-stretch"] {
    & > .vbx-grid-item__content {
      align-content: stretch;
    }
  }
  &[class*="--align-content-space-between"] {
    & > .vbx-grid-item__content {
      align-content: space-between;
    }
  }
  &[class*="--align-content-space-around"] {
    & > .vbx-grid-item__content {
      align-content: space-around;
    }
  }
}

.vbx-grid-item__content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vbx-grid-item--gap, 0);
}