@theme {
  --snap-align: start;
  --snap-type: proximity;

  /* --scroll-margin: 1rlh; */
}

@utility scrollable {
  & {
    display: flex;
    gap: var(--gap, 1rlh);

    > :where(*) {
      flex-grow: 0;
      flex-shrink: 0;
      scroll-snap-align: var(--snap-align);
      scroll-margin: var(--scroll-margin);
    }
  }
}

@utility scrollable-x {
  & {
    @apply scrollable;
    overflow: auto hidden;
    flex-direction: row;
    max-width: 100%;
    scroll-snap-type: x var(--snap-type);
  }
}

@utility scrollable-y {
  & {
    @apply scrollable;
    overflow: hidden auto;
    flex-direction: column;
    scroll-snap-type: y var(--snap-type);
  }
}

/* prettier-ignore */
@utility snap-type-* {
  --snap-type: --value(--snap-type-*);
}

@utility scrollable-nosnap {
  --snap-type: none;
}

/*********************
 * Aliases *
 *********************/
@utility scrollable-horizontal {
  @apply scrollable-x;
}

@utility scrollable-vertical {
  @apply scrollable-y;
}