@splendidlabz/styles 2.3.2 → 3.0.0

package/dist/no-tw/layouts.css

@@ -0,0 +1,1278 @@
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+@layer theme, base, components, utilities @import '../src/reset.css' layer(reset);
+@layer utilities {
+  .sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index, 15);
+    :where([class*='grid'] > &) {
+      align-self: start;
+    }
+  }
+  .sticky {
+    position: sticky;
+  }
+  .masonry {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+    grid-template-rows: masonry;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      grid-column-end: span var(--span, 1);
+      align-self: start;
+    }
+  }
+  .container {
+    width: 100%;
+  }
+}
+@layer components {
+  .divider-x, .divider-horizontal {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    &::before, &::after {
+      flex-grow: 1;
+      height: var(--border-width, 1px);
+    }
+  }
+  .divider-y, .divider-vertical {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    :where(.vertical, .single-col, .wrap) > & {
+      flex-grow: 1;
+    }
+    &::before, &::after {
+      flex-grow: 1;
+      width: var(--border-width, 1px);
+    }
+  }
+  .divider-between-x, .divider-between-horizontal {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    flex-direction: column;
+    row-gap: 0;
+    > * + *, > * + *:where(astro-island, astro-slot) > * {
+      border-top-width: var(--border-width, 1px);
+      border-color: var(--border-color);
+    }
+  }
+  .divider-between-y, .divider-between-vertical {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    column-gap: 0;
+    > * + *, > * + *:where(astro-island, astro-slot) > * {
+      border-left-width: var(--border-width, 1px);
+      border-color: var(--border-color);
+    }
+  }
+}
+@layer components {
+  .horizontal {
+    > *, > :where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      flex-grow: var(--grow);
+    }
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+    > .spacer {
+      margin-inline-start: auto;
+    }
+  }
+  .vertical {
+    > *, > :where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      flex-grow: var(--grow);
+    }
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+    > .spacer {
+      margin-block-start: auto;
+    }
+  }
+  .flow {
+    > *, > :where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      flex-grow: var(--grow);
+    }
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+  }
+  .stack {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0;
+    &::before, &::after, > *, > *:where(astro-island, astro-slot) > * {
+      position: relative;
+      z-index: 1;
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 1;
+    }
+    > .background {
+      overflow: hidden;
+      position: absolute;
+      inset: 0;
+    }
+    > .foreground {
+      position: relative;
+      z-index: 10;
+    }
+  }
+  .new-stacking-context {
+    transform: translateZ(0);
+  }
+  .scrollable {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+  }
+  .scrollable-x {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: auto hidden;
+    flex-direction: row;
+    max-width: 100%;
+    scroll-snap-type: x var(--snap-type);
+  }
+  .scrollable-horizontal {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: auto hidden;
+    flex-direction: row;
+    max-width: 100%;
+    scroll-snap-type: x var(--snap-type);
+  }
+  .scrollable-y {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: hidden auto;
+    flex-direction: column;
+    scroll-snap-type: y var(--snap-type);
+  }
+  .scrollable-vertical {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: hidden auto;
+    flex-direction: column;
+    scroll-snap-type: y var(--snap-type);
+  }
+  .scrollable-preserve-outlines {
+    box-sizing: content-box;
+    margin: calc(var(--outline-width) * -1);
+    padding: calc(var(--outline-width));
+  }
+  .scrollable-nosnap {
+    --snap-type: none;
+  }
+}
+@layer components {
+  .shell-simple {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    > .content {
+      flex-grow: 1;
+    }
+    > .footer {
+      flex-shrink: 0;
+    }
+  }
+  .shell-grid {
+    display: grid;
+    grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, 1fr);
+    gap: var(--gap, 0);
+    height: 100dvh;
+    &:has(> header) {
+      grid-template-rows: auto 1fr;
+    }
+    &:has(> .right-sidebar) {
+      grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, var(--content-width, 1fr)) minmax(0, var(--rsb-width, auto));
+    }
+    & > .is(header, .Full) {
+      grid-column: 1 / -1;
+    }
+    > .left-sidebar, > .right-sidebar, > .content {
+      overflow: auto;
+      grid-column-end: span var(--span, 1);
+      height: auto;
+    }
+  }
+}
+@layer components {
+  .wrap {
+    padding-inline: var(--wrap-padding, 1rem);
+  }
+  .flex-grid {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--gap, 1rem);
+    max-width: 100%;
+    > *, > *:where(astro-island, astro-slot) > *, > :where(.contents) > * {
+      --one-column: var(--gap, 1rem) * (var(--cols, 1) - 1);
+      flex: var(--grow, var(--span, 1)) var(--span, 1) calc( (100% - var(--one-column)) / var(--cols, 1) * var(--span, 1) + (var(--span, 1) - 1) * var(--gap, 1rem) );
+      min-width: min(100%, var(--item-width, 3rem));
+      max-width: 100%;
+    }
+  }
+  .grid-simple {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+  }
+  .grid-repeat-auto {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+  }
+  .grid-fr-auto {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+  }
+  .grid-auto-fr {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+  }
+  .grid-with-breakout {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: [breakout-start] 1fr [content-start] repeat( var(--cols, 1), minmax(0, 1fr) ) [content-end] 1fr [breakout-end];
+    > *:not([class*='breakout-full']) {
+      grid-column: content-start / content-end;
+    }
+    > *:where(.breakout-full) {
+      grid-column: breakout-start / breakout-end;
+    }
+  }
+  .grid-gallery {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat( var(--fit, auto-fill), minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+  }
+  .grid-gallery-fit {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat( var(--fit, auto-fill), minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+    --fit: auto-fit;
+  }
+  .grid-gallery-fill {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat( var(--fit, auto-fill), minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+    --fit: auto-fill;
+  }
+  .dense {
+    grid-auto-flow: dense;
+  }
+  .dense-column {
+    grid-auto-columns: dense;
+  }
+  .dense-row {
+    grid-auto-rows: dense;
+  }
+  .masonry {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+    grid-template-rows: masonry;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      grid-column-end: span var(--span, 1);
+      align-self: start;
+    }
+  }
+  .masonry-gallery {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+    grid-template-rows: masonry;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      grid-column-end: span var(--span, 1);
+      align-self: start;
+    }
+    grid-template-columns: repeat( auto-fill, minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+  }
+  .subgrid {
+    display: grid;
+    gap: inherit;
+    grid-column: var(--start, auto) / span var(--span, 1);
+    grid-template-columns: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-column-end: span var(--ispan, 1);
+      width: 100%;
+      max-width: 100%;
+    }
+    display: grid;
+    gap: inherit;
+    grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+    grid-template-rows: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-row-end: span var(--irowspan, 1);
+    }
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+  .subgrid-columns {
+    display: grid;
+    gap: inherit;
+    grid-column: var(--start, auto) / span var(--span, 1);
+    grid-template-columns: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-column-end: span var(--ispan, 1);
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+  .subgrid-rows {
+    display: grid;
+    gap: inherit;
+    grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+    grid-template-rows: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-row-end: span var(--irowspan, 1);
+    }
+  }
+}
+@layer components {
+  .edge-top {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    :where(.stack) > & {
+      place-self: start center;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+    }
+  }
+  .edge-topleft {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: start start;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .edge-topright {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: start end;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .edge-topfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    :where(.stack) > & {
+      place-self: start center;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+    }
+  }
+  .edge-bottom {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    :where(.stack) > & {
+      place-self: end center;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+    }
+  }
+  .edge-bottomleft {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: end start;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .edge-bottomright {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: end end;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .edge-bottomfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    :where(.stack) > & {
+      place-self: end center;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+    }
+  }
+  .edge-left {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: center start;
+    }
+    :where(.relative) > & {
+      inset-inline-start: 0;
+    }
+  }
+  .edge-leftfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: center start;
+    }
+    :where(.relative) > & {
+      inset-inline-start: 0;
+    }
+  }
+  .edge-right {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: center end;
+    }
+    :where(.relative) > & {
+      inset-inline-end: 0;
+    }
+  }
+  .edge-rightfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: center end;
+    }
+    :where(.relative) > & {
+      inset-inline-end: 0;
+    }
+  }
+  .edge-topleft-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: start start;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+    --ty: -50%;
+    --tx: -100%;
+  }
+  .edge-topleft-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: start start;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+    --ty: -50%;
+    --tx: 0%;
+  }
+  .edge-topright-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: start end;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+    --ty: -50%;
+    --tx: 0%;
+  }
+  .edge-topright-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: start end;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+    --ty: -50%;
+    --tx: 100%;
+  }
+  .edge-bottomleft-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: end start;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+    --ty: 50%;
+    --tx: -100%;
+  }
+  .edge-bottomleft-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: end start;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+    --ty: 50%;
+    --tx: 0%;
+  }
+  .edge-bottomright-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: end end;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+    --ty: 50%;
+    --tx: 0%;
+  }
+  .edge-bottomright-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: end end;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+    --ty: 50%;
+    --tx: 100%;
+  }
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  .fixed-topleft {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: auto;
+  }
+  .fixed-topright {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    left: auto;
+  }
+  .fixed-topfull {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+  }
+  .fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .fixed-bottomleft {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: auto;
+  }
+  .fixed-bottomright {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    left: auto;
+  }
+  .fixed-bottomfull {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+  }
+  .fixed-left {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .fixed-leftfull {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    position: relative;
+    left: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+  }
+  .fixed-right {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .fixed-rightfull {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    position: relative;
+    right: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+  }
+  .fixed-center {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .fixed-overlay {
+    pointer-events: none;
+    position: fixed;
+    inset-block: var(--nudge-y, var(--nudge, 0));
+    inset-inline: var(--nudge-x, var(--nudge, 0));
+    display: grid;
+  }
+  .pos-top {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start center;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-block-start: 0;
+    }
+  }
+  .pos-topleft {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .pos-topright {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .pos-topfull {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start stretch;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline: 0;
+    }
+  }
+  .pos-bottom {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end center;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-block-end: 0;
+    }
+  }
+  .pos-bottomleft {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .pos-bottomright {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .pos-bottomfull {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end stretch;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline: 0;
+    }
+  }
+  .pos-left {
+    position: relative;
+    left: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: center start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-inline-start: 0;
+    }
+  }
+  .pos-leftfull {
+    position: relative;
+    left: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: stretch start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block: 0;
+    }
+  }
+  .pos-right {
+    position: relative;
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: center end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-inline-end: 0;
+    }
+  }
+  .pos-rightfull {
+    position: relative;
+    right: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: stretch end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-inline-end: 0;
+      inset-block: 0;
+    }
+  }
+  .pos-center {
+    :where([class*='stack']) > & {
+      place-self: center center;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .pos-overlay {
+    :where([class*='stack']) > & {
+      display: grid;
+      > * {
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 1;
+      }
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset: 0;
+    }
+  }
+  .sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index, 15);
+    :where([class*='grid'] > &) {
+      align-self: start;
+    }
+    position: sticky;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .container {
+    container-type: inline-size;
+  }
+  .contents {
+    display: contents;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .grow-0 {
+    flex-grow: 0;
+  }
+  .shrink {
+    flex-shrink: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .justify-start {
+    justify-content: start;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: end;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
+  .justify-items-start {
+    justify-items: start;
+  }
+  .justify-items-center {
+    justify-items: center;
+  }
+  .justify-items-end {
+    justify-items: end;
+  }
+  .justify-items-stretch {
+    justify-items: stretch;
+  }
+  .justify-self-start {
+    justify-self: start;
+  }
+  .justify-self-center {
+    justify-self: center;
+  }
+  .justify-self-end {
+    justify-self: end;
+  }
+  .justify-self-stretch {
+    justify-self: stretch;
+  }
+  .content-start {
+    align-content: start;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .content-end {
+    align-content: end;
+  }
+  .content-between {
+    align-content: space-between;
+  }
+  .content-around {
+    align-content: space-around;
+  }
+  .content-stretch {
+    align-content: stretch;
+  }
+  .content-baseline {
+    align-content: baseline;
+  }
+  .items-start {
+    align-items: start;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: end;
+  }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .self-start {
+    align-self: start;
+  }
+  .self-center {
+    align-self: center;
+  }
+  .self-end {
+    align-self: end;
+  }
+  .self-stretch {
+    align-self: stretch;
+  }
+  .self-baseline {
+    align-self: baseline;
+  }
+}