@mixin abstract-responsive-grid() {
  --unitone--auto-repeat: auto-fit;
  --unitone--column-min-width: 240px;
  --unitone--gap: var(--unitone--global--gap);
  --unitone--column-gap: var(--unitone--gap);
  --unitone--row-gap: var(--unitone--gap);

  display: grid;
  column-gap: var(--unitone--column-gap);
  row-gap: var(--unitone--row-gap);
  grid-template-columns: repeat(var(--unitone--auto-repeat), minmax(min(var(--unitone--column-min-width), 100%), 1fr));
  list-style: none;

  > * {
    margin: 0;
    min-width: 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;
    }

    > ::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"] {
    row-gap: 0;

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

      &::before {
        left: calc(var(--unitone--column-gap) * -1);
        border-width: var(--unitone--divider-width) 0;
      }
    }

    > [data-unitone-layout~="-bol"]::before {
      left: 0;
    }

    > [data-unitone-layout~="-linewrap"] {
      padding-top: var(--unitone--row-gap);

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

  &[data-unitone-layout~="-divider\:underline"] {
    row-gap: 0;

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

      &::before {
        left: calc(var(--unitone--column-gap) * -1);
        border-width: 0 0 var(--unitone--divider-width);
      }
    }

    > [data-unitone-layout~="-bol"]::before {
      left: 0;
    }

    > [data-unitone-layout~="-linewrap"] {
      padding-top: var(--unitone--row-gap);
    }
  }

  &[data-unitone-layout~="-divider\:stripe-vertical"] {
    // For vertical layout.
    &[data-unitone-layout~="-stack"] {
      row-gap: 0;

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

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

      > [data-unitone-layout~="-linewrap"] {
        padding-top: var(--unitone--row-gap);

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

    // For horizontal layout.
    &:not([data-unitone-layout~="-stack"]) {
     column-gap: 0;

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

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

      > :not([data-unitone-layout~="-bol"]) {
        &::before {
          border-left: 0;
        }
      }
    }
  }

  &[data-unitone-layout~="-divider\:divide-vertical"] {
    // For vertical layout.
    &[data-unitone-layout~="-stack"] {
      row-gap: 0;

      // Without this, -stack will be added but there will be times when it does not become one column.
      column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));

      > :not(:last-child) {
        padding-bottom: var(--unitone--row-gap);
      }

      > [data-unitone-layout~="-linewrap"] {
        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));

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

    // For horizontal layout.
    &:not([data-unitone-layout~="-stack"]) {
      column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));

      > :not([data-unitone-layout~="-bol"]) {
        &::before {
          left: calc(var(--unitone--column-gap) * -1 - var(--unitone--divider-width));
          border-left-width: var(--unitone--divider-width);
        }
      }
    }
  }

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

    > * {
      padding: 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"] {
      padding-top: var(--unitone--column-gap);

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

    &[data-unitone-layout~="-stack"] {
      > * {
        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
      }

      > [data-unitone-layout~="-linewrap"] {
        padding-top: var(--unitone--row-gap);
      }
    }
  }

  &:where([data-unitone-layout*="-stairs\:"]) {
    align-items: start;
    padding-bottom: calc(var(--unitone--stairs-step-overflow-volume, 0) * 1px);
    visibility: hidden;

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

    > :where([style*="--unitone--stairs-step:"]) {
      position: relative;
    }

    &:where(:not([data-unitone-layout~="-stairs-up\:right"])) {
      > * {
        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
      }
    }

    &:where([data-unitone-layout~="-stairs-up\:right"]) {
      > * {
        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
      }
    }

    &:where([data-unitone-layout~="-stairs-up\:up-down"]) {
      > * {
        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
      }
    }

    &:where([data-unitone-layout~="-stairs-up\:down-up"]) {
      > * {
        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
      }
    }
  }
}

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