.board-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.board-view__columns {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
  padding: 0 0.5rem 0.5rem;
}

.board-view[data-size="xs"] .board-view__column-body {
  padding: 0.25rem;
}

.board-view[data-size="sm"] .board-view__column-body {
  padding: 0.375rem;
}

.board-view[data-size="md"] .board-view__column-body {
  padding: 0.5rem;
}

.board-view[data-size="xl"] .board-view__column-body {
  padding: 0.75rem;
}

.board-view__column {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.board-view__column-header {
  border-color: var(--border);
}

.board-view__column-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.board-view__card {
  flex-shrink: 0;
}

.board-view__columns::-webkit-scrollbar,
.board-view__column-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.board-view__columns::-webkit-scrollbar-track,
.board-view__column-body::-webkit-scrollbar-track {
  background: transparent;
}

.board-view__columns::-webkit-scrollbar-thumb,
.board-view__column-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
  border-radius: 9999px;
}

.board-view__columns::-webkit-scrollbar-thumb:hover,
.board-view__column-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
}
