:root {
  /* Aspect Ratio */
  --aspect-ratio-square: 1/1;
  --aspect-ratio-video: 16/9;
  --aspect-ratio-4-3: 4/3;
  --aspect-ratio-3-2: 3/2;
  --aspect-ratio-2-1: 2/1;

  /* Z-Index */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
}

.hidden {
  display: none !important;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-1 {
  height: 1px;
}

.w-full {
  width: 100%;
}

/* Aspect Ratio */
.aspect-square {
  aspect-ratio: var(--aspect-ratio-square);
}

.aspect-video {
  aspect-ratio: var(--aspect-ratio-video);
}

.aspect-4-3 {
  aspect-ratio: var(--aspect-ratio-4-3);
}

.aspect-3-2 {
  aspect-ratio: var(--aspect-ratio-3-2);
}

.aspect-2-1 {
  aspect-ratio: var(--aspect-ratio-2-1);
}

/* Position */
.sticky-top {
  position: sticky;
  top: 0;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.top-0 { top: 0; }

.left-0 { left: 0; }

.fixed { position: fixed; }

.absolute { position: absolute; }

.relative { position: relative; }

/* Z-Index */
.z-0 { z-index: var(--z-0); }
.z-10 { z-index: var(--z-10); }
.z-20 { z-index: var(--z-20); }
.z-30 { z-index: var(--z-30); }
.z-40 { z-index: var(--z-40); }
.z-50 { z-index: var(--z-50); }
.z-auto { z-index: var(--z-auto); }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-visible { overflow: visible; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-visible { overflow-x: visible; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-visible { overflow-y: visible; }

.hidden { visibility: hidden; }