@theme {
  --tx: 0%;
  --ty: 0%;
}

/* prettier-ignore */
@utility edge-scaffold {
  transform: translateX(var(--_tx, 0%)) translateY(var(--_ty, 0%));
}

/*********************
 * stack edge utilities *
 *********************/

/* Top */
@utility stack-edge-top {
  place-self: start center;
  box-sizing: content-box;
}

@utility stack-edge-topleft {
  place-self: start start;
  box-sizing: content-box;
}

@utility stack-edge-topright {
  place-self: start end;
  box-sizing: content-box;
}

@utility stack-edge-topfull {
  place-self: start stretch;
  box-sizing: content-box;
}

/* Bottom */
@utility stack-edge-bottom {
  place-self: end center;
  box-sizing: content-box;
}

@utility stack-edge-bottomleft {
  place-self: end start;
  box-sizing: content-box;
}

@utility stack-edge-bottomright {
  place-self: end end;
  box-sizing: content-box;
}

@utility stack-edge-bottomfull {
  place-self: end stretch;
  box-sizing: content-box;
}

/* Left */
@utility stack-edge-left {
  place-self: center start;
  box-sizing: content-box;
}

@utility stack-edge-lefttop {
  place-self: start start;
  box-sizing: content-box;
}

@utility stack-edge-leftbottom {
  place-self: end start;
  box-sizing: content-box;
}

@utility stack-edge-leftfull {
  place-self: stretch start;
  box-sizing: content-box;
}

/* Right */
@utility stack-edge-right {
  place-self: center end;
  box-sizing: content-box;
}

@utility stack-edge-righttop {
  place-self: start end;
  box-sizing: content-box;
}

@utility stack-edge-rightbottom {
  place-self: end end;
  box-sizing: content-box;
}

@utility stack-edge-rightfull {
  place-self: stretch end;
  box-sizing: content-box;
}

/*********************
 * relative edge utilities *
 *********************/

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

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

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

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

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

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

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

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

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

@utility relative-edge-lefttop {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

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

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

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

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

@utility relative-edge-rightbottom {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
}

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

/*********************
 * Edge adjustments *
 *********************/

/* Top *
 *********************/
@utility edge-adjust-top {
  --tx: 0%;
  --ty: -50%;
  --_tx: var(--tx);
  --_ty: var(--ty);
}

@utility edge-adjust-topleft-start {
  @apply edge-adjust-top;
  --tx: -100%;
  --_tx: var(--tx);
}

@utility edge-adjust-topleft {
  @apply edge-adjust-top;
  --tx: -50%;
  --_tx: var(--tx);
}

@utility edge-adjust-topleft-end {
  @apply edge-adjust-top;
  --tx: 0%;
  --_tx: var(--tx);
}

@utility edge-adjust-topright-start {
  @apply edge-adjust-top;
  --tx: 0%;
  --_tx: calc(var(--tx) * -1);
}

@utility edge-adjust-topright {
  @apply edge-adjust-top;
  --tx: -50%;
  --_tx: calc(var(--tx) * -1);
}

@utility edge-adjust-topright-end {
  @apply edge-adjust-top;
  --tx: -100%;
  --_tx: calc(var(--tx) * -1);
}

/* Bottom *
 *********************/
@utility edge-adjust-bottom {
  --tx: 0%;
  --ty: -50%;
  --_tx: var(--tx);
  --_ty: calc(var(--ty) * -1);
}

@utility edge-adjust-bottomleft-start {
  @apply edge-adjust-bottom;
  --tx: -100%;
  --_tx: var(--tx);
}

@utility edge-adjust-bottomleft {
  @apply edge-adjust-bottom;
  --tx: -50%;
  --_tx: var(--tx);
}

@utility edge-adjust-bottomleft-end {
  @apply edge-adjust-bottom;
  --tx: -0%;
  --_tx: var(--tx);
}

@utility edge-adjust-bottomright-start {
  @apply edge-adjust-bottom;
  --tx: -0%;
  --_tx: calc(var(--tx) * -1);
}

@utility edge-adjust-bottomright {
  @apply edge-adjust-bottom;
  --tx: -50%;
  --_tx: calc(var(--tx) * -1);
}

@utility edge-adjust-bottomright-end {
  @apply edge-adjust-bottom;
  --tx: -100%;
  --_tx: calc(var(--tx) * -1);
}

/* Left *
 *********************/
@utility edge-adjust-left {
  --tx: -50%;
  --ty: 0%;
  --_tx: var(--tx);
  --_ty: var(--ty);
}

@utility edge-adjust-lefttop-start {
  @apply edge-adjust-left;
  --ty: -100%;
  --_ty: var(--ty);
}

@utility edge-adjust-lefttop {
  @apply edge-adjust-left;
  --ty: -50%;
  --_ty: var(--ty);
}

@utility edge-adjust-lefttop-end {
  @apply edge-adjust-left;
  --ty: -0%;
  --_ty: var(--ty);
}

@utility edge-adjust-leftbottom-start {
  @apply edge-adjust-left;
  --ty: -0%;
  --_ty: calc(var(--ty) * -1);
}

@utility edge-adjust-leftbottom {
  @apply edge-adjust-left;
  --ty: -50%;
  --_ty: calc(var(--ty) * -1);
}

@utility edge-adjust-leftbottom-end {
  @apply edge-adjust-left;
  --ty: -100%;
  --_ty: calc(var(--ty) * -1);
}

/* Right *
 *********************/
@utility edge-adjust-right {
  --tx: -50%;
  --ty: 0%;
  --_tx: calc(var(--tx) * -1);
  --_ty: calc(var(--ty));
}

@utility edge-adjust-righttop-start {
  @apply edge-adjust-right;
  --ty: -100%;
  --_ty: var(--ty);
}

@utility edge-adjust-righttop {
  @apply edge-adjust-right;
  --ty: -50%;
  --_ty: var(--ty);
}

@utility edge-adjust-righttop-end {
  @apply edge-adjust-right;
  --ty: -0%;
  --_ty: var(--ty);
}

@utility edge-adjust-rightbottom-start {
  @apply edge-adjust-right;
  --ty: -0%;
  --_ty: calc(var(--ty) * -1);
}

@utility edge-adjust-rightbottom {
  @apply edge-adjust-right;
  --ty: -50%;
  --_ty: calc(var(--ty) * -1);
}

@utility edge-adjust-rightbottom-end {
  @apply edge-adjust-right;
  --ty: -100%;
  --_ty: calc(var(--ty) * -1);
}

/*********************
 * Edge utilities *
 *********************/
@utility edge-top {
  @apply nudge-top;
  @apply edge-scaffold;
  @apply edge-adjust-top;

  :where(.stack) & {
    @apply stack-edge-top;
  }

  :where(.relative) & {
    @apply relative-edge-top;
  }
}

@utility edge-topleft {
  @apply nudge-topleft;
  @apply edge-scaffold;
  @apply edge-adjust-topleft;

  :where(.stack) & {
    @apply stack-edge-topleft;
  }

  :where(.relative) & {
    @apply relative-edge-topleft;
  }
}

@utility edge-topright {
  @apply nudge-topright;
  @apply edge-scaffold;
  @apply edge-adjust-topright;

  :where(.stack) & {
    @apply stack-edge-topright;
  }

  :where(.relative) & {
    @apply relative-edge-topright;
  }
}

@utility edge-topfull {
  @apply nudge-topfull;
  @apply edge-scaffold;
  @apply edge-adjust-top;

  :where(.stack) & {
    @apply stack-edge-topfull;
  }

  :where(.relative) & {
    @apply relative-edge-topfull;
  }
}

/* Bottom */
@utility edge-bottom {
  @apply nudge-bottom;
  @apply edge-scaffold;
  @apply edge-adjust-bottom;

  :where(.stack) & {
    @apply stack-edge-bottom;
  }

  :where(.relative) & {
    @apply relative-edge-bottom;
  }
}

@utility edge-bottomleft {
  @apply nudge-bottom;
  @apply edge-scaffold;
  @apply edge-adjust-bottomleft;

  :where(.stack) & {
    @apply stack-edge-bottomleft;
  }

  :where(.relative) & {
    @apply relative-edge-bottomleft;
  }
}

@utility edge-bottomright {
  @apply nudge-bottomright;
  @apply edge-scaffold;
  @apply edge-adjust-bottomright;

  :where(.stack) & {
    @apply stack-edge-bottomright;
  }

  :where(.relative) & {
    @apply relative-edge-bottomright;
  }
}

@utility edge-bottomfull {
  @apply nudge-bottomfull;
  @apply edge-scaffold;
  @apply edge-adjust-bottom;

  :where(.stack) & {
    @apply stack-edge-bottomfull;
  }

  :where(.relative) & {
    @apply relative-edge-bottomfull;
  }
}

/* Left */
@utility edge-left {
  @apply nudge-left;
  @apply edge-scaffold;
  @apply edge-adjust-left;

  :where(.stack) & {
    @apply stack-edge-left;
  }

  :where(.relative) & {
    @apply relative-edge-left;
  }
}

@utility edge-lefttop {
  @apply nudge-topleft;
  @apply edge-scaffold;
  @apply edge-adjust-lefttop;

  :where(.stack) & {
    @apply stack-edge-lefttop;
  }

  :where(.relative) & {
    @apply relative-edge-lefttop;
  }
}

@utility edge-leftbottom {
  @apply nudge-bottomleft;
  @apply edge-scaffold;
  @apply edge-adjust-leftbottom;

  :where(.stack) & {
    @apply stack-edge-leftbottom;
  }

  :where(.relative) & {
    @apply relative-edge-leftbottom;
  }
}

@utility edge-leftfull {
  @apply nudge-leftfull;
  @apply edge-scaffold;
  @apply edge-adjust-left;

  :where(.stack) & {
    @apply stack-edge-leftfull;
  }

  :where(.relative) & {
    @apply relative-edge-leftfull;
  }
}

/* Right */
@utility edge-right {
  @apply nudge-right;
  @apply edge-scaffold;
  @apply edge-adjust-right;

  :where(.stack) & {
    @apply stack-edge-right;
  }

  :where(.relative) & {
    @apply relative-edge-right;
  }
}

@utility edge-righttop {
  @apply nudge-topright;
  @apply edge-scaffold;
  @apply edge-adjust-righttop;

  :where(.stack) & {
    @apply stack-edge-righttop;
  }

  :where(.relative) & {
    @apply relative-edge-righttop;
  }
}

@utility edge-rightbottom {
  @apply nudge-bottomright;
  @apply edge-scaffold;
  @apply edge-adjust-rightbottom;

  :where(.stack) & {
    @apply stack-edge-rightbottom;
  }

  :where(.relative) & {
    @apply relative-edge-rightbottom;
  }
}

@utility edge-rightfull {
  @apply nudge-rightfull;
  @apply edge-scaffold;
  @apply edge-adjust-right;

  :where(.stack) & {
    @apply stack-edge-rightfull;
  }

  :where(.relative) & {
    @apply relative-edge-rightfull;
  }
}

/*********************
 * Edge with adjustments *
 *********************/
@utility edge-topleft-start {
  @apply edge-topleft;
  @apply edge-adjust-topleft-start;
}

@utility edge-topleft-end {
  @apply edge-topleft;
  @apply edge-adjust-topleft-end;
}

@utility edge-topright-start {
  @apply edge-topright;
  @apply edge-adjust-topright-start;
}

@utility edge-topright-end {
  @apply edge-topright;
  @apply edge-adjust-topright-end;
}

@utility edge-bottomleft-start {
  @apply edge-bottomleft;
  @apply edge-adjust-bottomleft-start;
}

@utility edge-bottomleft-end {
  @apply edge-bottomleft;
  @apply edge-adjust-bottomleft-end;
}

@utility edge-bottomright-start {
  @apply edge-bottomright;
  @apply edge-adjust-bottomright-start;
}

@utility edge-bottomright-end {
  @apply edge-bottomright;
  @apply edge-adjust-bottomright-end;
}

@utility edge-lefttop-start {
  @apply edge-lefttop;
  @apply edge-adjust-lefttop-start;
}

@utility edge-lefttop-end {
  @apply edge-lefttop;
  @apply edge-adjust-lefttop-end;
}

@utility edge-leftbottom-start {
  @apply edge-leftbottom;
  @apply edge-adjust-leftbottom-start;
}

@utility edge-leftbottom-end {
  @apply edge-leftbottom;
  @apply edge-adjust-leftbottom-end;
}

@utility edge-righttop-start {
  @apply edge-righttop;
  @apply edge-adjust-righttop-start;
}

@utility edge-righttop-end {
  @apply edge-righttop;
  @apply edge-adjust-righttop-end;
}

@utility edge-rightbottom-start {
  @apply edge-rightbottom;
  @apply edge-adjust-rightbottom-start;
}

@utility edge-rightbottom-end {
  @apply edge-rightbottom;
  @apply edge-adjust-rightbottom-end;
}