/**
 * Copyright (c) Enalean, 2017-Present. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@use "pkg:@tuleap/burningparrot-theme/css/includes/global-variables";
@use "pkg:@tuleap/plugin-tracker-artifact-modal";
@use "pkg:dragular/dist/dragular";
@use "pkg:@tuleap/plugin-cardwall-card-fields";
@use "./socket";
@use "./edit-kanban";
@use "./kanban-item";
@use "./reports-modal";
@use "./diagram";
@use "./add-to-dashboard";
@use "./filter";
@use "./feedback";
@use "./add-in-place";
@use "./under-the-fold-notification";
@use "./project-header-background";

$kanban-column-closed-width: 60px;
$kanban-column-header-height: 50px;
$kanban-column-footer-height: 50px;

@keyframes loading-items {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 0.05;
    }
}

.kanban {
    display: flex;
    flex-direction: column;
    height: calc(100vh - #{global-variables.$breadcrumb-height});
}

.sidebar-collapsed .kanban {
    height: calc(100vh - #{global-variables.$breadcrumb-height-with-collapsed-sidebar});
}

.has-visible-project-banner .kanban {
    height: calc(
        100vh - #{global-variables.$breadcrumb-height} - #{global-variables.$project-banner-base-height}
    );
}

.has-visible-project-banner.sidebar-collapsed .kanban {
    height: calc(
        100vh - #{global-variables.$breadcrumb-height-with-collapsed-sidebar} - #{global-variables.$project-banner-base-height}
    );
}

.has-visible-platform-banner {
    .kanban {
        height: calc(
            100vh - #{global-variables.$breadcrumb-height} - #{global-variables.$platform-banner-base-height}
        );
    }

    &.sidebar-collapsed .kanban {
        height: calc(
            100vh - #{global-variables.$breadcrumb-height-with-collapsed-sidebar} - #{global-variables.$platform-banner-base-height}
        );
    }

    &.has-visible-project-banner .kanban {
        height: calc(
            100vh - #{global-variables.$breadcrumb-height} - #{global-variables.$project-banner-base-height} -
                #{global-variables.$platform-banner-base-height} - #{global-variables.$extra-platform-banner-white-space-height}
        );
    }

    &.has-visible-project-banner.sidebar-collapsed .kanban {
        height: calc(
            100vh - #{global-variables.$breadcrumb-height-with-collapsed-sidebar} - #{global-variables.$project-banner-base-height} -
                #{global-variables.$platform-banner-base-height} - #{global-variables.$extra-platform-banner-white-space-height}
        );
    }
}

.kanban-header {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--tlp-medium-spacing) var(--tlp-medium-spacing) var(--tlp-title-spacing);
}

.kanban-header-title {
    margin: 0 var(--tlp-medium-spacing) 0 0;
}

.kanban-header-config {
    display: flex;
    flex: 1 1 auto;
}

.kanban-header-add-artifact-button {
    margin: 0 var(--tlp-small-spacing) 0 0;
}

.kanban-header-report-button {
    margin: 0 0 0 var(--tlp-small-spacing);
}

.kanban-header-compact-toggler-label {
    display: flex;
    align-items: center;
}

.kanban-header-spacer {
    flex: 10 1 auto;
    margin: 0 var(--tlp-medium-spacing);
}

.kanban-header-filter-edit-buttons-spacer {
    flex: 1 1 auto;
    margin: var(--tlp-small-spacing);
}

.kanban-header-search {
    flex: 0 1 auto;
    width: 150px;
    margin: 0 0 0 var(--tlp-small-spacing);
    background: var(--tlp-white-color);
}

.kanban-filtered-info {
    padding: 0 var(--tlp-medium-spacing) var(--tlp-small-spacing);
}

.kanban-board {
    display: flex;
    z-index: 1;
    flex: auto;
    overflow-x: auto;
}

.kanban-column {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    transition: background 100ms;
    border-bottom: 1px solid var(--tlp-neutral-normal-color);
    border-left: 1px solid var(--tlp-neutral-normal-color);
    background: var(--tlp-background-color);

    &:hover,
    &:focus-within {
        > .add-in-place {
            opacity: 1;
            pointer-events: auto;
        }
    }

    &.archive {
        border-right: 1px solid var(--tlp-neutral-normal-color);
    }

    &.kanban-column-open {
        flex: 1 1 100%;
        min-width: 260px;

        > .kanban-column-label {
            display: none;
        }
    }

    &.kanban-column-closed {
        flex: 1 1 $kanban-column-closed-width;
        min-width: $kanban-column-closed-width;
        overflow: hidden;
        background: var(--tlp-white-color);
        cursor: pointer;

        &:hover {
            background: var(--tlp-white-color-darker-02);

            > .kanban-column-header {
                background: var(--tlp-white-color-darker-02);
            }
        }

        > .kanban-column-header {
            justify-content: center;
        }
    }

    &.wip-reached {
        background: var(--tlp-warning-color-lighter-07);

        &.kanban-column-closed {
            background: var(--tlp-warning-color-lighter-07);

            > .kanban-column-header {
                background: var(--tlp-warning-color-lighter-07);
            }

            &:hover {
                background: var(--tlp-warning-color-lighter-12);

                // scss-lint:disable NestingDepth
                > .kanban-column-header {
                    background: var(--tlp-warning-color-lighter-12);
                }
            }
        }

        > .kanban-column-header {
            border-bottom-width: 2px;
            border-top-color: var(--tlp-warning-color);
            border-bottom-color: var(--tlp-warning-color);

            > .kanban-column-header-label,
            > column-wip-header > .kanban-column-header-wip > .kanban-column-header-wip-count,
            > .kanban-column-header-wip-warning,
            > .kanban-column-header-toggle,
            > .kanban-column-label {
                color: var(--tlp-warning-color);
            }
        }

        > .kanban-column-label {
            opacity: 0.6;
            color: var(--tlp-warning-color);
        }

        .kanban-column-header-wip-count {
            opacity: 0.6;
        }
    }
}

.kanban-column-header {
    display: flex;
    flex: 0 0 $kanban-column-header-height;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: $kanban-column-header-height;
    max-height: 50px;
    padding: 10px;
    transition: background 100ms;
    border-top: 2px solid var(--tlp-main-color);
    border-bottom: 1px solid var(--tlp-neutral-normal-color);
    background: var(--tlp-white-color);
}

.kanban-column-header-toggle {
    color: var(--tlp-main-color);
    font-size: 0.8125rem;
    cursor: pointer;
}

.kanban-column-header-wip-warning {
    margin: 0 0 0 var(--tlp-small-spacing);
    cursor: help;
}

.kanban-column-header-label {
    flex: 1 1 auto;
    margin: 0 10px;
    overflow: hidden;
    color: var(--tlp-main-color);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.kanban-column-header-wip {
    display: flex;
    position: relative;
    z-index: 1000;
    flex: 0 0 auto;
    align-items: center;
}

.kanban-column-header-wip-limit {
    font-size: 13px;

    &.infinity {
        padding: 5px 9px 3px;
    }

    &.editable {
        cursor: pointer;
    }
}

.kanban-column-header-wip-limit-infinite {
    font-size: 18px;
    font-weight: 400;
}

.kanban-column-header-wip-count {
    position: relative;
    top: -1px;
    margin: 0 5px 0 0;
    animation: none;
    opacity: 0.4;
    color: var(--tlp-main-color);
    font-size: 1.75rem;
    font-weight: 300;

    &.loading {
        animation: 250ms linear 0s infinite alternate loading-items;
    }
}

.kanban-column-header-wip-limit-chevron {
    margin: 0 5px 0 0;
    font-size: 11px;
}

.wip-limit-form {
    margin: var(--tlp-small-spacing) var(--tlp-medium-spacing);
}

.wip-limit-input {
    width: 55px;
}

kanban-column {
    display: flex;
    flex: auto;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.wip-reached > kanban-column {
    scrollbar-color: var(--tlp-warning-color-transparent-60) transparent;
}

.kanban-column-closed > kanban-column {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    scrollbar-gutter: initial;
}

@keyframes blink-column {
    0% {
        background: var(--tlp-white-color);
    }

    50% {
        background: var(--tlp-main-color-lighter-90);
    }

    100% {
        background: var(--tlp-white-color);
    }
}

.created-in-closed-column {
    animation: blink-column 1s ease-in-out alternate infinite;
}

.kanban-items {
    flex-grow: 1; // To allow drag-and-drop in empty columns
    margin: 0;
    padding: 0 0 calc(add-in-place.$button-size + add-in-place.$from-bottom + 2px);
}

.kanban-column-label {
    display: flex;
    z-index: 3;
    width: $kanban-column-closed-width;
    transform: scaleX(-1) scaleY(-1);
    color: var(--tlp-main-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: $kanban-column-closed-width;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: tb-rl;
}

.kanban-column-label-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-column-label-count {
    display: inline-block;
    margin: 10px 0;
    opacity: 0.4;
    font-size: 1.75rem;
    font-weight: 300;

    &.loading {
        animation: 250ms linear 0s infinite alternate loading-items;
    }
}

.widget-context {
    > .kanban-header {
        padding: 0 0 var(--tlp-medium-spacing);

        > .kanban-header-title {
            display: none;
        }
    }
}

.kanban-header-url {
    margin: 0 var(--tlp-large-spacing) 0 0;
}
