.kanban-container {
    @apply w-full flex gap-2 overflow-x-auto;

    .kanban-statuses {
        @apply w-full flex flex-col gap-2;

        min-width: 250px;

        .status-header {
            @apply w-full flex gap-1 items-center bg-white p-3 mb-3 text-xs font-medium text-gray-400 uppercase rounded-t border-b-4;
        }

        .status-container {
            @apply relative w-full flex flex-col gap-2 bg-white p-2 rounded overflow-y-auto overflow-x-hidden border-b-4;

            height: calc(100vh);

            .create-record {
                @apply flex items-center gap-1 mt-auto text-xs text-gray-500 p-3 bg-transparent hover:text-gray-600 hover:bg-gray-100 rounded;
            }

            .kanban-record {
                @apply w-full flex flex-col gap-4 rounded bg-gray-50 border border-gray-200 p-3 hover:shadow hover:bg-gray-100 relative;

                .handle {
                    @apply absolute top-0 right-0 text-gray-500 opacity-0 hover:cursor-pointer bg-gray-100 hover:bg-gray-200 rounded-bl p-2 transition;
                }

                &:hover {
                    .handle {
                        @apply opacity-100;
                    }
                }

                .record-info {
                    @apply w-full flex flex-col gap-0;

                    .record-subtitle {
                        @apply text-xs text-gray-400;
                    }

                    .record-title {
                        @apply text-base text-gray-600 hover:cursor-pointer;

                        .code {
                            @apply text-xs font-medium text-gray-400;
                        }

                        &:hover {
                            .title {
                                @apply underline;
                            }
                        }
                    }
                }

                .record-footer {
                    @apply w-full flex justify-between items-center;

                    .record-type-code {
                        @apply flex items-center gap-2;
                    }

                    .avatar {
                        @apply w-6 h-6 rounded-full bg-gray-200 bg-cover bg-center;
                    }
                }

                .record-relations {
                    @apply w-full flex flex-col gap-1;

                    & > div {
                        @apply flex items-center gap-1 text-sm text-gray-600;

                        a {
                            @apply font-medium hover:underline;
                        }
                    }
                }

                .record-logged-hours {
                    @apply flex items-center gap-1 text-gray-500 text-xs;
                }
            }
        }
    }
}