.ap-mask-polygonal-controls {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .35rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: .35rem;
}

.ap-mask-polygonal-controls[hidden],
.ap-mask-polygonal-overlay[hidden] {
  display: none;
}

.ap-mask-polygonal-controls [data-ap-polygon-state] {
  min-width: 7.5rem;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  opacity: .78;
}

#ap-canvas[data-mask-polygonal="true"] {
  cursor: crosshair;
  touch-action: none;
}

.ap-mask-polygonal-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ap-mask-polygonal-fill {
  fill: rgba(255, 255, 255, .1);
  stroke: none;
}

.ap-mask-polygonal-guide {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8));
}

.ap-mask-polygonal-vertices circle {
  fill: #111;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.ap-mask-polygonal-vertices circle[data-first="true"] {
  fill: currentColor;
  stroke: #111;
  stroke-width: 2;
}

@media (max-width: 820px) {
  .ap-mask-polygonal-controls {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .ap-mask-polygonal-controls [data-ap-polygon-state] {
    flex: 1 1 100%;
    min-width: 0;
  }
}