/*********************
 * fixed *
 *********************/

/* top *
  *********************/
@utility fixed-top {
  & {
    @apply nudge-top;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    width: fit-content;
    margin-inline: auto;
  }
}

@utility fixed-topleft {
  & {
    @apply nudge-topleft;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
  }
}

@utility fixed-topright {
  & {
    @apply nudge-topright;
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
  }
}

@utility fixed-topfull {
  & {
    @apply nudge-topfull;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* bottom *
 *********************/
@utility fixed-bottom {
  & {
    @apply nudge-bottom;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    width: fit-content;
    margin-inline: auto;
  }
}

@utility fixed-bottomleft {
  & {
    @apply nudge-bottomleft;
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 0;
  }
}

@utility fixed-bottomright {
  & {
    @apply nudge-bottomright;
    position: fixed;
    inset-block-end: 0;
    inset-inline-end: 0;
  }
}

@utility fixed-bottomfull {
  & {
    @apply nudge-bottomfull;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* left *
*********************/
@utility fixed-left {
  & {
    @apply nudge-left;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    height: fit-content;
    margin-block: auto;
  }
}

@utility fixed-leftfull {
  & {
    @apply nudge-leftfull;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    height: 100%;
    max-height: 100%;
  }
}

/* right *
*********************/
@utility fixed-right {
  & {
    @apply nudge-right;
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    height: fit-content;
    margin-block: auto;
  }
}

@utility fixed-rightfull {
  & {
    @apply nudge-rightfull;
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    height: 100%;
    max-height: 100%;
  }
}

/* center *
*********************/
@utility fixed-center {
  & {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
  }
}

/* overlay *
*********************/
@utility fixed-overlay {
  & {
    @apply nudge-overlay;
    position: fixed;
    inset-block: var(--nudge-y, var(--nudge, 0));
    inset-inline: var(--nudge-x, var(--nudge, 0));
    display: grid;
    place-items: center;
  }
}