.visualization--board {
  .board--column {
    @apply max-h-full flex flex-col shrink-0 p-2 border bg-base-200 border-neutral-content/30 rounded-md transition-all duration-200;
    width: 256px;

    &.collapsed {
      width: 50px;
    }

    .board--column--header {
      @apply flex flex-row flex-nowrap justify-between items-center gap-x-1 mb-4 px-2 relative;
    }

    .board--column--header-title {
      @apply grow font-semibold truncate text-base-content hover:text-base-content;
    }

    .board--column--header-actions {
      @apply flex flex-row gap-4 grow-0 shrink-0 relative;
    }

    .board--column--card-list {
      @apply flex flex-col flex-auto flex-nowrap gap-y-2 items-stretch overflow-y-auto overflow-x-hidden scroll-smooth;
    }

    .board--column--footer {
      @apply sticky bottom-0 w-full;
    }

    .board--column--create-button {
      @apply w-full flex flex-row items-center mt-4 p-2 hover:bg-base-100 rounded-md;

      .board--column--create-button-shortcut {
        @apply hidden text-xs font-medium ml-2 mr-2;
      }

      &:hover {
        @apply flex;

        .board--column--create-button-shortcut {
          @apply flex;
        }
      }
    }

    .inline-card-form {
      @apply flex-col mt-2;
      display: none;
    }

    &.card-form-showing {
      .inline-card-form {
        display: flex;
      }

      .board--column--create-button {
        display: none;
      }
    }

    &.collapsed {
      .board--column--header {
        @apply flex-col;
      }

      .board--column--header-title {
        @apply flex flex-col uppercase text-center;
      }

      .board--column--header-actions {
        @apply order-first;
      }

      .board--column--menu-button {
        @apply hidden;
      }

      .board--column--card-list {
        @apply hidden;
      }

      .board--column--footer {
        @apply hidden;
      }
    }
  }
}