/*********************
 * stack pos utilities *
 *********************/

/* prettier-ignore */
@utility stack-pos-top { place-self: start center; }

/* prettier-ignore */
@utility stack-pos-topleft { place-self: start start; }

/* prettier-ignore */
@utility stack-pos-topright { place-self: start end; }

/* prettier-ignore */
@utility stack-pos-topfull { place-self: start stretch; }

/* prettier-ignore */
@utility stack-pos-bottomleft { place-self: end start; }

/* prettier-ignore */
@utility stack-pos-bottom { place-self: end center; }

/* prettier-ignore */
@utility stack-pos-bottomright { place-self: end end; }

/* prettier-ignore */
@utility stack-pos-bottomfull { place-self: end stretch; }

/* prettier-ignore */
@utility stack-pos-left { place-self: center start; }

/* prettier-ignore */
@utility stack-pos-leftfull { place-self: stretch start; }

/* prettier-ignore */
@utility stack-pos-right { place-self: center end; }

/* prettier-ignore */
@utility stack-pos-rightfull { place-self: stretch end; }

/* prettier-ignore */
@utility stack-pos-center { place-self: center center; }

@utility stack-pos-overlay {
  display: grid;

  > * {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }
}

/*********************
 * Relative pos utilities *
 *********************/
@utility relative-pos-top {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: fit-content;
  margin-inline: auto;
}

@utility relative-pos-topleft {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

@utility relative-pos-topright {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

@utility relative-pos-topfull {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

@utility relative-pos-bottom {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  width: fit-content;
  margin-inline: auto;
}

@utility relative-pos-bottomleft {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
}

@utility relative-pos-bottomright {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
}

@utility relative-pos-bottomfull {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
}

@utility relative-pos-left {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  height: fit-content;
  margin-block: auto;
}

@utility relative-pos-leftfull {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
}

@utility relative-pos-right {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  height: fit-content;
  margin-block: auto;
}

@utility relative-pos-rightfull {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
}

@utility relative-pos-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@utility relative-pos-overlay {
  position: absolute;
  inset: 0;
}

/*********************
 * pos utilities for client use *
 *********************/
@utility pos-top {
  @apply nudge-top;

  :where([class*='stack']) > & {
    @apply stack-pos-top;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-top;
  }
}

@utility pos-topleft {
  @apply nudge-topleft;

  :where([class*='stack']) > & {
    @apply stack-pos-topleft;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-topleft;
  }
}

@utility pos-topright {
  @apply nudge-topright;

  :where([class*='stack']) > & {
    @apply stack-pos-topright;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-topright;
  }
}

@utility pos-topfull {
  @apply nudge-topfull;

  :where([class*='stack']) > & {
    @apply stack-pos-topfull;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-topfull;
  }
}

@utility pos-bottom {
  @apply nudge-bottom;

  :where([class*='stack']) > & {
    @apply stack-pos-bottom;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-bottom;
  }
}

@utility pos-bottomleft {
  @apply nudge-bottomleft;

  :where([class*='stack']) > & {
    @apply stack-pos-bottomleft;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-bottomleft;
  }
}

@utility pos-bottomright {
  @apply nudge-bottomright;

  :where([class*='stack']) > & {
    @apply stack-pos-bottomright;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-bottomright;
  }
}

@utility pos-bottomfull {
  @apply nudge-bottomfull;

  :where([class*='stack']) > & {
    @apply stack-pos-bottomfull;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-bottomfull;
  }
}

@utility pos-left {
  @apply nudge-left;

  :where([class*='stack']) > & {
    @apply stack-pos-left;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-left;
  }
}

@utility pos-leftfull {
  @apply nudge-leftfull;

  :where([class*='stack']) > & {
    @apply stack-pos-leftfull;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-leftfull;
  }
}

@utility pos-right {
  @apply nudge-right;

  :where([class*='stack']) > & {
    @apply stack-pos-right;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-right;
  }
}

@utility pos-rightfull {
  @apply nudge-rightfull;

  :where([class*='stack']) > & {
    @apply stack-pos-rightfull;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-rightfull;
  }
}

@utility pos-center {
  :where([class*='stack']) > & {
    @apply stack-pos-center;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-center;
  }
}

@utility pos-overlay {
  @apply nudge-overlay;

  :where([class*='stack']) > & {
    @apply stack-pos-overlay;
  }

  :where([class*='relative']) > & {
    @apply relative-pos-overlay;
  }
}