{"version":3,"file":"kanbanBoard.module.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/kanbanBoard.module.pcss"],"sourcesContent":["/* Columns stretch to the tallest one, so the space below a column's cards is still its drop zone.\n   Sized to its content, an empty column was a short box, and a card dropped below it landed in\n   the neighbouring column. */\n.board {\n  display: flex;\n  gap: var(--spacing-s);\n  overflow-x: auto;\n  width: 100%;\n}\n\n.column {\n  background: var(--background-accent-light);\n  border-radius: var(--default-border-radius);\n  box-shadow: var(--card-shadow);\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  border: 2px solid transparent;\n  transition:\n    border-color 0.15s ease,\n    background 0.15s ease;\n\n  &-collapsed {\n    flex: 0 1 0;\n    min-width: var(--kanban-empty-column-width, 140px);\n  }\n\n  /* Too narrow for the title beside the count and actions, which cut it to \"I…\": they wrap below. */\n  &-collapsed &-header {\n    flex-wrap: wrap;\n  }\n\n  &-collapsed &-header-title {\n    white-space: normal;\n  }\n\n  &-over {\n    border-color: var(--primary-lighter);\n    background: var(--background-accent);\n  }\n\n  &-over-limit {\n    border-color: var(--warn-color);\n  }\n\n  /* A whole column being dragged over this one, reordering — distinct from -over (a card being\n     dropped into this column's card list), even though both are dashed-free solid borders here;\n     kept as a separate class so consumers can restyle one without affecting the other. */\n  &-drop-target {\n    border-color: var(--primary-color);\n    background: var(--background-accent);\n  }\n\n  /* Dims only the cards area, not the header — header actions (e.g. an \"add card\" button) are\n     consumer-controlled and often meant to stay fully interactive even while the column itself\n     is frozen for dragging, and opacity on an ancestor can't be undone by a child's own opacity. */\n  &-disabled &-items {\n    opacity: 0.6;\n  }\n\n  &-dragging {\n    opacity: 0.4;\n  }\n\n  &-drag-overlay {\n    cursor: grabbing;\n    box-shadow:\n      0 10px 30px rgb(0 0 0 / 25%),\n      var(--card-shadow);\n    min-width: 220px;\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--spacing-s);\n    padding: var(--spacing-m) var(--spacing-l);\n    background: var(--background-accent);\n    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    font-size: var(--header-small-font-size);\n    font-weight: var(--header-font-weight);\n    color: var(--text-color);\n    border-bottom: 1px solid var(--border-color);\n\n    &-reorderable {\n      cursor: grab;\n      -webkit-tap-highlight-color: transparent;\n      touch-action: none;\n      user-select: none;\n\n      &:active {\n        cursor: grabbing;\n      }\n    }\n\n    &-title {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\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\n    &-count {\n      flex-shrink: 0;\n      font-size: var(--default-font-size);\n      font-weight: var(--default-font-weight);\n      color: var(--text-dark);\n\n      &-over {\n        color: var(--warn-color);\n        font-weight: var(--header-font-weight);\n      }\n    }\n\n    &-trailing {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-s);\n      flex-shrink: 0;\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-s);\n    }\n  }\n\n  /* Scrolls once something bounds it: `columnMaxHeight`, or a height given to the board. A board\n     that grows with its cards never makes it overflow. `position` makes its cards' `offsetTop`\n     relative to it, which the load-more probe measures. */\n  &-items {\n    position: relative;\n    padding: var(--spacing-m);\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-m);\n    min-height: 80px;\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  &-placeholder {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    color: var(--text-dark);\n    font-size: var(--default-font-size);\n  }\n\n  &-loading-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--spacing-s) 0;\n  }\n}\n\n/* A press that can start a text selection lets Chromium scroll the page while the button is held\n   near its edge, however far past the board. Where a press starts a drag, it cannot select. */\n.item {\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\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  &:active {\n    cursor: grabbing;\n  }\n\n  &-dragging {\n    opacity: 0.4;\n  }\n\n  &-handled {\n    cursor: default;\n    touch-action: auto;\n    user-select: auto;\n\n    &:active {\n      cursor: default;\n    }\n\n    [data-drag-handle] {\n      cursor: grab;\n      -webkit-tap-highlight-color: transparent;\n      touch-action: none;\n      user-select: none;\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\n    [data-drag-handle]:active {\n      cursor: grabbing;\n    }\n  }\n\n  &-disabled {\n    cursor: not-allowed;\n\n    &:active {\n      cursor: not-allowed;\n    }\n\n    [data-drag-handle] {\n      cursor: not-allowed;\n    }\n\n    [data-drag-handle]:active {\n      cursor: not-allowed;\n    }\n  }\n}\n\n.dragOverlay {\n  border-radius: var(--default-border-radius);\n  cursor: grabbing;\n  box-shadow:\n    0 10px 30px rgb(0 0 0 / 25%),\n    var(--card-shadow);\n}\n"],"mappings":""}