{"version":3,"file":"roomDrawer.module.mjs","names":[],"sources":["../../../../package/common/roomDrawer/roomDrawer.module.pcss"],"sourcesContent":[".roomDrawer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-s, 8px);\n  color: var(--text-color);\n  position: relative;\n\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 2px;\n    border-radius: var(--default-border-radius);\n  }\n\n  &-disabled {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n\n  /* ── Toolbar ── */\n\n  &-toolbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 4px;\n    padding: 4px;\n    background: var(--background-accent);\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n\n    &-separator {\n      width: 1px;\n      align-self: stretch;\n      margin: 2px 4px;\n      background: var(--border-color);\n    }\n  }\n\n  &-toolButton,\n  &-viewButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 34px;\n    height: 34px;\n    padding: 0 8px;\n    border: 1px solid transparent;\n    border-radius: var(--default-border-radius);\n    background: transparent;\n    color: var(--text-color);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover:not(:disabled) {\n      background: var(--background-accent-light);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &:disabled {\n      opacity: 0.4;\n      cursor: default;\n    }\n  }\n\n  &-toolButtonActive {\n    background: var(--primary-color);\n    color: var(--text-on-primary);\n\n    &:hover {\n      background: var(--primary-color);\n    }\n  }\n\n  &-toolIcon {\n    pointer-events: none;\n  }\n\n  &-viewControls {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    margin-left: auto;\n  }\n\n  &-zoomLabel {\n    min-width: 62px;\n    height: 34px;\n    padding: 0 6px;\n    border: 1px solid transparent;\n    border-radius: var(--default-border-radius);\n    background: transparent;\n    color: var(--text-dark);\n    font-size: 12px;\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: var(--background-accent-light);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n  }\n\n  /* Storeys, top one first. A strip rather than a dropdown because switching floors is\n     something you do constantly while drawing, and a dropdown costs two clicks each time. */\n  &-floorBar {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    flex-wrap: wrap;\n    padding: var(--spacing-xs, 4px);\n    background: var(--background-accent);\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n  }\n\n  &-floorTab {\n    height: 28px;\n    padding: 0 10px;\n    border: 1px solid transparent;\n    border-radius: var(--default-border-radius);\n    background: transparent;\n    color: var(--text-dark);\n    font-size: 12px;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: var(--background-accent-light);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-active {\n      background: var(--primary-color);\n      border-color: var(--primary-color);\n      color: var(--text-on-primary);\n      font-weight: 600;\n\n      &:hover {\n        background: var(--primary-color);\n      }\n    }\n\n    &-add {\n      padding: 0 8px;\n      color: var(--text-dark);\n    }\n  }\n\n  /* ── Canvas ── */\n\n  &-canvasWrapper {\n    position: relative;\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    background: var(--background);\n\n    /* Without this the browser claims the gesture and pointermove stops firing mid-drag. */\n    touch-action: none;\n    cursor: default;\n    -webkit-tap-highlight-color: transparent;\n\n    &-drawing {\n      cursor: crosshair;\n    }\n  }\n\n  /* ── Screen-space overlay ── */\n\n  &-preview {\n    fill: var(--primary-accent);\n    fill-opacity: 0.12;\n    stroke: var(--primary-color);\n    stroke-width: 1.5;\n    stroke-dasharray: 5 4;\n  }\n\n  &-marquee {\n    fill: var(--primary-color);\n    fill-opacity: 0.1;\n    stroke: var(--primary-color);\n    stroke-width: 1;\n    stroke-dasharray: 4 3;\n  }\n\n  &-handle {\n    fill: var(--background);\n    stroke: var(--primary-color);\n    stroke-width: 2;\n\n    &-active {\n      fill: var(--primary-color);\n    }\n  }\n\n  /* A latched toggle (snap, angle lock, grid): on, but not the active tool. */\n  &-toolButtonOn {\n    border-color: var(--primary-color);\n    color: var(--primary-color);\n  }\n\n  /* ── Snap feedback ── */\n\n  &-guide {\n    stroke: var(--plan-guide-color, var(--info-color));\n    stroke-width: 1;\n    stroke-dasharray: 4 4;\n    opacity: 0.8;\n    pointer-events: none;\n\n    /* Angle lock gets the brand colour: it is the one the user asked for by name. */\n    &-angle {\n      stroke: var(--primary-color);\n      stroke-dasharray: 6 3;\n      opacity: 0.9;\n    }\n  }\n\n  &-snapMarker {\n    fill: none;\n    stroke: var(--primary-color);\n    stroke-width: 1.5;\n    pointer-events: none;\n  }\n\n  /* A measurement, not geometry: dashed and in the accent colour so it can never be\n     mistaken for a wall that was actually drawn. */\n  &-measureLine {\n    pointer-events: none;\n\n    line {\n      stroke: var(--plan-measure-color, var(--primary-color));\n      stroke-width: 1.25;\n      stroke-dasharray: 5 4;\n    }\n\n    line + line {\n      stroke-dasharray: none;\n    }\n\n    &-hovered line {\n      stroke-width: 2;\n      opacity: 1;\n    }\n  }\n\n  /* Only drawn while the ruler is the active tool, so it never competes with a corner\n     handle for the same pixel. */\n  &-measureGrip {\n    fill: var(--background);\n    stroke: var(--plan-measure-color, var(--primary-color));\n    stroke-width: 1.5;\n    cursor: grab;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Hollow and smaller than a corner handle: it marks a corner that does not exist yet. */\n  &-midHandle {\n    fill: var(--background);\n    stroke: var(--primary-color);\n    stroke-width: 1.5;\n    stroke-dasharray: 2.5 2;\n  }\n\n  &-measure {\n    fill: var(--text-color);\n    font-size: 11px;\n    font-variant-numeric: tabular-nums;\n    paint-order: stroke;\n    stroke: var(--background);\n    stroke-width: 3px;\n    stroke-linejoin: round;\n\n    &-locked {\n      fill: var(--primary-color);\n      font-weight: 600;\n    }\n\n    /* How far a room has been dragged. Carries a chip behind it because it floats over the\n       room's own fill rather than sitting on a wall, where the halo alone would do. */\n    &-offset {\n      fill: var(--text-on-primary);\n      font-weight: 600;\n      paint-order: stroke;\n      stroke: var(--primary-color);\n      stroke-width: 8px;\n      stroke-linejoin: round;\n    }\n\n    /* A consequence of the edit rather than its subject: still readable, but clearly\n       secondary to the wall or corner actually being moved. */\n    &-secondary {\n      fill: var(--text-dark);\n      opacity: 0.75;\n    }\n  }\n\n  /* ── Inspector ── */\n\n  &-inspector {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding: 8px;\n    background: var(--background-accent);\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n\n    &-action {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      height: 34px;\n      padding: 0 12px;\n      border: 1px solid var(--border-color);\n      border-radius: var(--default-border-radius);\n      background: var(--background);\n      color: var(--text-color);\n      font-size: 13px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n\n      &:hover:not(:disabled) {\n        background: var(--background-accent-light);\n      }\n\n      &:disabled {\n        opacity: 0.4;\n        cursor: default;\n      }\n\n      &:focus-visible {\n        outline: none;\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n    }\n\n    &-label {\n      color: var(--text-dark);\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* What is selected. Carries the bar on its own for a corner, which has nothing to edit\n       but a position that is already being edited by dragging it. */\n    &-kind {\n      display: flex;\n      align-items: center;\n      flex: none;\n\n      /* Always rendered, so it is what holds the row open to a field's height whether or\n         not the selection has any fields. Setting this on the bar itself would not do:\n         it is border-box, so the figure would have to know the padding. */\n      min-height: 34px;\n      color: var(--text-dark);\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n\n    &-kindEmpty {\n      opacity: 0.6;\n      font-weight: 500;\n      text-transform: none;\n      letter-spacing: 0;\n      font-size: 12px;\n    }\n\n    /* Sized to their contents, so the row stays a row. A field at its natural full width\n       wrapped onto a line of its own and took the bar to three of them. They still wrap\n       when the drawer is genuinely too narrow for them. */\n    &-field {\n      flex: none;\n\n      /* Wide enough for the longest floating label, `Thickness (mm)`, plus the stepper\n         arrows: a narrower box left the label hanging over its own border. */\n      width: 142px;\n    }\n\n    &-name {\n      flex: 1 1 150px;\n      min-width: 120px;\n      max-width: 280px;\n    }\n\n    /* The one action that applies to every kind of selection, and the only destructive one,\n       so it sits apart at the end rather than in the run of fields. */\n    &-delete {\n      margin-left: auto;\n    }\n  }\n\n  /* ── Hint ── */\n\n  &-hint {\n    color: var(--text-dark);\n    font-size: 12px;\n    line-height: 1.4;\n\n    /* What an opened file needed doing to it. Louder than a hint because it is the only\n       account of what happened to the user's file. */\n    &-report {\n      color: var(--error-color, var(--text-color));\n      font-weight: 500;\n    }\n  }\n\n  /* The picker is opened from the toolbar button, so the input itself is never shown.\n     Hidden by clipping rather than `display: none`, which stops `.click()` opening the\n     dialog in some browsers. */\n  &-fileInput {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    border: 0;\n    clip-path: inset(50%);\n    overflow: hidden;\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}