@mixin abstract-cluster() {
  --unitone--align-items: strech;
  --unitone--gap: var(--unitone--global--text-gap);
  --unitone--column-gap: var(--unitone--gap);
  --unitone--row-gap: var(--unitone--gap);
  --unitone--justify-content: start;

  display: flex;
  flex-wrap: wrap;
  column-gap: var(--unitone--column-gap);
  row-gap: var(--unitone--row-gap);
  justify-content: var(--unitone--justify-content);
  align-items: var(--unitone--align-items);
  list-style: none;

  > * {
    margin: 0;
    min-width: 0;
  }

  &:where([data-unitone-layout~="-nowrap"]) {
    flex-wrap: nowrap;
    width: max-content;

    > * {
      flex-shrink: 0;
    }
  }

  &:where([data-unitone-layout*="-divider\:"]) {
    --unitone--divider-width: 1px;
    --unitone--divider-style: solid;
    --unitone--divider-color: var(--unitone--color--gray);

    visibility: hidden;

    &[data-unitone-layout~="divider:initialized"] {
      visibility: visible;
    }

    > * {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: var(--unitone--align-items);
    }

    > ::before {
      content: '';
      position: absolute;
      inset: 0;
      user-select: none;
      pointer-events: none;
      border-width: 0;
      border-style: var(--unitone--divider-style);
      border-color: var(--unitone--divider-color);
    }
  }

  &[data-unitone-layout~="-divider\:stripe"] {
    column-gap: 0;
    align-items: stretch;

    > * {
      padding: 0 calc(var(--unitone--column-gap) + var(--unitone--divider-width));

      &::before {
        border-width: 0 var(--unitone--divider-width);
      }
    }

    > :not([data-unitone-layout~="-bol"]) {
      padding-left: var(--unitone--column-gap);

      &::before {
        border-left: 0;
      }
    }
  }

  &[data-unitone-layout~="-divider\:slash"] {
    column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
    align-items: stretch;

    > * + :not([data-unitone-layout~="-bol"])::before {
      right: auto;
      left: calc(var(--unitone--column-gap) * -1 - var(--unitone--divider-width));
      border-left-width: var(--unitone--divider-width);
      border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
      transform: rotate(22.5deg) scale(.8);
    }
  }

  &[data-unitone-layout~="-divider\:bordered"] {
    gap: 0;
    align-items: stretch;

    > * {
      padding:
        calc(var(--unitone--row-gap) + var(--unitone--divider-width))
        calc(var(--unitone--column-gap) + var(--unitone--divider-width));

      &::before {
        border-width: var(--unitone--divider-width);
      }
    }

    > :not([data-unitone-layout~="-bol"]) {
      padding-left: var(--unitone--column-gap);

      &::before {
        border-left-width: 0;
      }
    }

    > [data-unitone-layout~="-linewrap"] {
      margin-top: calc(var(--unitone--divider-width) * -1);
    }
  }
}

@mixin cluster() {
  [data-unitone-layout~="cluster"] {
    @include abstract-cluster();
  }
}