.clothingEdgePointer {
  --pointer-x: 8px;
  --pointer-y: 50%;
  --pointer-angle: 180deg;
  --pointer-image-size: 19px;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2.5px;
  margin: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1.5px 4px rgb(0 0 0 / 55%));
  transition: opacity 160ms ease;
  will-change: transform;
}

.clothingEdgePointer[data-visible="true"] {
  opacity: 1;
}

.clothingEdgePointer[data-edge="left"] {
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0)
    translateY(-50%);
}

.clothingEdgePointer[data-edge="right"] {
  flex-direction: row-reverse;
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0)
    translate(-100%, -50%);
}

.clothingEdgePointer[data-edge="top"] {
  flex-direction: column;
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0)
    translateX(-50%);
}

.clothingEdgePointer[data-edge="bottom"] {
  flex-direction: column-reverse;
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0)
    translate(-50%, -100%);
}

.clothingEdgePointer__arrow {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--pointer-image-size);
  height: calc(var(--pointer-image-size) * 0.92622);
  overflow: hidden;
  transform: rotate(calc(var(--pointer-angle) + 180deg));
  transform-origin: center;
}

.clothingEdgePointer__arrow img {
  position: absolute;
  top: calc(var(--pointer-image-size) * -0.75889);
  left: calc(var(--pointer-image-size) * -0.43742);
  display: block;
  width: calc(var(--pointer-image-size) * 1.90777);
  max-width: none;
  height: calc(var(--pointer-image-size) * 2.69829);
  pointer-events: none;
  user-select: none;
}

.clothingEdgePointer__label {
  min-width: 43px;
  padding: 3px 4.5px 2.5px;
  color: #fff;
  background: rgb(10 10 10 / 94%);
  border: 0.5px solid rgb(255 255 255 / 24%);
  letter-spacing: 0.015em;
  text-align: center;
  text-shadow: 0 0.5px 1px rgb(0 0 0 / 70%);
  font: 800 5.5px/1.05 Georgia, "Times New Roman", serif;
}

@media (max-width: 760px), (pointer: coarse) {
  .clothingEdgePointer {
    --pointer-image-size: 16px;
    gap: 2px;
  }

  .clothingEdgePointer__label {
    min-width: 39px;
    padding: 2.5px 4px 2px;
    font-size: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clothingEdgePointer {
    transition: none;
  }
}