.kanban {
  @apply -flex -flex-col -items-start -relative -min-w-fit;
}

/* Kanban header. */
.kanban-header {
  @apply -flex -flex-row -h-[--kanban-header-height];
}
.kanban.has-sub-cols .kanban-header {
  height: calc(var(--kanban-header-height) * 2);
}
.kanban-header-lane-name {
  @apply -flex-none -w-[--kanban-lane-name-width] -bg-fore/5;
}
.kanban-header-cols,
.kanban-header-sub-cols {
  @apply -flex -flex-row -gap-[--kanban-cols-gap] -flex-1;
}
.kanban-header-sub-cols {
  @apply -border-t-2 -border-canvas;
}
.kanban-header-col {
  @apply -w-[--kanban-col-width] -h-full -flex -flex-1 -flex-col -items-center -border-b;
}
.kanban-header-col.has-subs {
  @apply -w-auto;
}
.kanban-header-col-wrapper {
  @apply -bg-surface -relative -px-14 -w-full -flex-1 -flex -flex-row -items-center;
}
.kanban-header-col-wrapper.is-align-left {
  @apply -justify-start -pl-2;
}
.kanban-header-col-wrapper.is-align-left > .kanban-header-title {
  @apply -justify-start;
}
.kanban-header-title {
  @apply -flex -flex-row -items-center -flex-auto -justify-center -overflow-hidden;
}
.kanban-header-title > .as-title {
  @apply -font-bold -overflow-hidden -whitespace-nowrap -text-[--kanban-col-color];
}
.kanban-header-col-actions {
  @apply -absolute -top-1 -bottom-1 -right-1;
}
.kanban-header-col-actions > .btn {
  @apply -opacity-60 hover:-opacity-100;
}

/* Kanban body. */
.kanban-body {
  @apply -flex -flex-col -gap-[--kanban-lanes-gap];
}
.kanban-lane {
  @apply -flex -flex-row -h-[--kanban-lane-height] -min-h-[96px];
}
.kanban-lane-name {
  @apply -bg-[--kanban-lane-color] -text-white -w-[--kanban-lane-name-width] -flex-none -flex -items-center -justify-center -relative;
  writing-mode: vertical-rl;
}
.kanban-lane-actions {
  @apply -flex-none -relative;
}
.kanban-lane.is-first .kanban-lane-actions {
  margin-top: calc(4px - var(--kanban-header-height));
}
.has-sub-cols .kanban-lane.is-first .kanban-lane-actions {
  margin-top: calc(4px - (var(--kanban-header-height) * 2));
}
.kanban-lane-actions > .btn.square {
  @apply -w-[--kanban-lane-name-width];
}
.kanban-lane-title {
  @apply -flex-auto -flex -justify-center -items-center -overflow-hidden -whitespace-nowrap;
}
.kanban-lane-cols {
  @apply -flex -flex-row -gap-[--kanban-cols-gap];
}
.kanban-lane-col {
  @apply -w-[--kanban-col-width] -bg-inverse/5 -h-full -flex -flex-col;
}
.kanban-header-col,
.kanban-lane-col {
  margin-left: calc(var(--kanban-col-gap-left) - var(--kanban-cols-gap));
  margin-right: calc(var(--kanban-col-gap-right) - var(--kanban-cols-gap));
}
.kanban-col-content {
  @apply -relative -z-[5];
}
.kanban-lane.is-first > .kanban-lane-name::before {
  @apply -content-[''] -block -absolute -left-0 -right-0 -h-[--kanban-header-height] -bottom-full -bg-[--kanban-lane-color];
}
.kanban.has-sub-cols .kanban-lane.is-first > .kanban-lane-name::before {
  height: calc(var(--kanban-header-height) * 2);
}
.kanban-lane {
  margin-top: calc(var(--kanban-col-gap-top) - var(--kanban-lanes-gap));
  margin-bottom: calc(var(--kanban-col-gap-bottom) - var(--kanban-lanes-gap));
}

/* Kanban items. */
.kanban-items {
  @apply -overflow-auto -flex-auto;
  scrollbar-gutter: both-edges stable;
}
.kanban-lane.is-auto-height .kanban-items {
  scrollbar-gutter: initial;
}
.kanban-item {
  @apply -cursor-default;
}
.kanban-item .card-actions {
  @apply -z-[5];
}

/* Kanban heading. */
.kanban-heading {
  @apply -w-full;
}
.kanban-heading .listitem {
  @apply -h-9;
}
.kanban-heading .item-title {
  @apply -font-bold;
}
