.ap-mask-tools {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.ap-mask-tools strong {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ap-mask-compose {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding-left: .35rem;
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.ap-mask-compose [aria-pressed="true"],
.ap-mask-tools [data-ap-mask-magic-wand][aria-pressed="true"] {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.ap-mask-feather,
.ap-mask-magic-wand-controls {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
}

.ap-mask-magic-wand-controls[hidden] {
  display: none;
}

.ap-mask-feather input,
.ap-mask-magic-wand-controls input {
  width: min(8rem, 22vw);
  accent-color: currentColor;
}

.ap-mask-feather output,
.ap-mask-magic-wand-controls output {
  min-width: 3.2rem;
  font-variant-numeric: tabular-nums;
  opacity: .78;
}

.ap-mask-tools [data-ap-mask-state] {
  font-size: .75rem;
  opacity: .72;
  max-width: 18rem;
}

#ap-canvas[data-mask-tool="rectangle"],
#ap-canvas[data-mask-tool="ellipse"],
#ap-canvas[data-mask-tool="lasso"],
#ap-canvas[data-mask-magic-wand="true"] {
  cursor: crosshair;
  touch-action: none;
}

.ap-canvas-viewport {
  position: relative;
}

.ap-mask-marquee {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border: 1px dashed currentColor;
  outline: 1px solid rgba(0, 0, 0, .45);
  background: rgba(255, 255, 255, .06);
  box-sizing: border-box;
}

.ap-mask-marquee[data-shape="ellipse"] {
  border-radius: 50%;
}

.ap-mask-marquee[data-shape="lasso"] {
  border: 0;
  outline: 0;
  background: rgba(255, 255, 255, .12);
  filter: drop-shadow(0 0 1px currentColor);
}

@media (max-width: 820px) {
  .ap-mask-tools {
    width: 100%;
  }

  .ap-mask-compose {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: 0;
  }

  .ap-mask-feather,
  .ap-mask-magic-wand-controls {
    flex: 1 1 100%;
  }

  .ap-mask-feather input,
  .ap-mask-magic-wand-controls input {
    flex: 1 1 auto;
    width: auto;
    min-width: 8rem;
  }

  .ap-mask-tools [data-ap-mask-state] {
    max-width: none;
    flex: 1 1 100%;
  }
}