:host {
  /*
   * @prop --wrapper-gap: customize spacing between elements. Uses css flex gap.
   */
  --wrapper-gap: var(--joy-core-spacing-8) var(--joy-core-spacing-4);
  display: block;
  margin-bottom: var(--joy-core-spacing-8);
}

:host([no-margin]) {
  margin-bottom: 0 !important;
}

.joy-wrapper {
  display: flex;
  gap: var(--wrapper-gap);
  flex-wrap: wrap;
}
.joy-wrapper--justify-flex-start {
  justify-content: flex-start;
}
.joy-wrapper--justify-flex-end {
  justify-content: flex-end;
}
.joy-wrapper--justify-center {
  justify-content: center;
}
.joy-wrapper--justify-space-between {
  justify-content: space-between;
}
.joy-wrapper--align-flex-start {
  align-items: flex-start;
}
.joy-wrapper--align-flex-end {
  align-items: flex-end;
}
.joy-wrapper--align-center {
  align-items: center;
}
.joy-wrapper--align-stretch {
  align-items: stretch;
}
.joy-wrapper--direction-row {
  flex-direction: row;
}
.joy-wrapper--direction-column {
  flex-direction: column;
}
.joy-wrapper--wrap-wrap {
  flex-wrap: wrap;
}
.joy-wrapper--wrap-nowrap {
  flex-wrap: nowrap;
}
.joy-wrapper--column-gap-0 {
  column-gap: 0;
}
.joy-wrapper--column-gap-1 {
  column-gap: var(--joy-core-spacing-1);
}
.joy-wrapper--column-gap-2 {
  column-gap: var(--joy-core-spacing-2);
}
.joy-wrapper--column-gap-3 {
  column-gap: var(--joy-core-spacing-3);
}
.joy-wrapper--column-gap-4 {
  column-gap: var(--joy-core-spacing-4);
}
.joy-wrapper--column-gap-5 {
  column-gap: var(--joy-core-spacing-5);
}
.joy-wrapper--column-gap-6 {
  column-gap: var(--joy-core-spacing-6);
}
.joy-wrapper--column-gap-7 {
  column-gap: var(--joy-core-spacing-7);
}
.joy-wrapper--column-gap-8 {
  column-gap: var(--joy-core-spacing-8);
}
.joy-wrapper--column-gap-9 {
  column-gap: var(--joy-core-spacing-9);
}
.joy-wrapper--column-gap-10 {
  column-gap: var(--joy-core-spacing-10);
}
.joy-wrapper--column-gap-11 {
  column-gap: var(--joy-core-spacing-11);
}
.joy-wrapper--column-gap-12 {
  column-gap: var(--joy-core-spacing-12);
}
.joy-wrapper--row-gap-0 {
  row-gap: 0;
}
.joy-wrapper--row-gap-1 {
  row-gap: var(--joy-core-spacing-1);
}
.joy-wrapper--row-gap-2 {
  row-gap: var(--joy-core-spacing-2);
}
.joy-wrapper--row-gap-3 {
  row-gap: var(--joy-core-spacing-3);
}
.joy-wrapper--row-gap-4 {
  row-gap: var(--joy-core-spacing-4);
}
.joy-wrapper--row-gap-5 {
  row-gap: var(--joy-core-spacing-5);
}
.joy-wrapper--row-gap-6 {
  row-gap: var(--joy-core-spacing-6);
}
.joy-wrapper--row-gap-7 {
  row-gap: var(--joy-core-spacing-7);
}
.joy-wrapper--row-gap-8 {
  row-gap: var(--joy-core-spacing-8);
}
.joy-wrapper--row-gap-9 {
  row-gap: var(--joy-core-spacing-9);
}
.joy-wrapper--row-gap-10 {
  row-gap: var(--joy-core-spacing-10);
}
.joy-wrapper--row-gap-11 {
  row-gap: var(--joy-core-spacing-11);
}
.joy-wrapper--row-gap-12 {
  row-gap: var(--joy-core-spacing-12);
}