@utility resizer {
  --size: 4px;
  background-color: var(--bg-color, transparent);

  &:hover {
    background-color: var(--bg-hover-color, pink);
  }
}

@utility resizer-horizontal {
  cursor: ew-resize;
  top: 0;
  bottom: 0;
  width: var(--size, 4px);
}

@utility resizer-vertical {
  cursor: ns-resize;
  left: 0;
  right: 0;
  height: var(--size, 4px);
}

@utility resizer-bottom {
  :where([class*='stack']) > & {
    place-self: end stretch;
  }

  :where([class*='relative']) > & {
    position: absolute;
    bottom: 0;
  }
}

@utility resizer-right {
  :where([class*='stack']) > & {
    place-self: stretch end;
  }

  :where([class*='relative']) > & {
    position: absolute;
    right: 0;
  }
}