.drawing-topbar {
  grid-template-columns: auto auto minmax(220px, 380px) minmax(0, 1fr) auto auto auto;
}

.drawing-topbar button,
.drawing-topbar .primary {
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .drawing-topbar {
    grid-template-columns: auto auto minmax(180px, 1fr) auto auto auto;
    gap: 10px;
  }

  .drawing-history {
    display: none;
  }
}

@media (max-width: 900px) {
  .drawing-brand {
    padding-right: 10px;
  }

  .drawing-brand span,
  .drawing-zoom {
    display: none;
  }

  .drawing-topbar {
    grid-template-columns: auto auto minmax(160px, 1fr) auto auto;
    gap: 8px;
    padding-inline: 10px;
  }
}

.drawing-edge {
  cursor: pointer;
}

.drawing-edge-hit,
.drawing-seam-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  vector-effect: non-scaling-stroke;
}

.drawing-edge-line {
  fill: none;
  stroke: #707583;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.drawing-edge-w .drawing-edge-line {
  stroke: #9aa0ad;
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.drawing-edge-oe .drawing-edge-line,
.drawing-edge-f .drawing-edge-line {
  stroke: #7056e8;
  stroke-width: 5;
}

.drawing-edge-m .drawing-edge-line {
  stroke: #e28a27;
  stroke-width: 5;
}

.drawing-edge.selected .drawing-edge-line {
  stroke: #159d79;
  stroke-width: 7;
}

.drawing-edge-label {
  fill: #343742;
  font-size: 8px;
  font-weight: 900;
  dominant-baseline: central;
  paint-order: stroke;
  pointer-events: none;
  stroke: #fff;
  stroke-width: 3px;
  text-anchor: middle;
}

.drawing-edge-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.drawing-edge-selects label {
  margin: 0;
}

.drawing-cutout,
.drawing-seam-group {
  cursor: move;
}

.drawing-cutout.selected rect,
.drawing-seam-group.selected .drawing-seam {
  stroke: #159d79;
  stroke-width: 3;
}