@o-kanban-record-margin: @flectra-horizontal-padding/2;
@o-kanban-group-padding: @flectra-horizontal-padding; // Cannot be higher than this

@o-kanban-default-record-width: 300px;
@o-kanban-small-record-width: 240px;

@o-kanban-header-title-height: 50px;

@o-kanban-image-width: 64px;
@o-kanban-inside-vgutter: 8px;
@o-kanban-inside-hgutter: 8px;
@o-kanban-color-border-width: 3px;
@o-kanban-inside-hgutter-mobile: @flectra-horizontal-padding;
@o-kanban-inner-hmargin: 5px;
@o-kanban-progressbar-height: 20px;

// ------- Kanban grouped mixins -------
.o-kanban-icon(@base-opacity: 0.5) {
    display: block;
    line-height: @o-kanban-header-title-height;
    text-align: center;
    color: @flectra-main-text-color;
    font-size: @font-size-small;
    cursor: pointer;
    .o-hover-opacity(@base-opacity);
}
.o-kanban-tag-color(@size: 0) when (@size < @flectra-nb-ui-color) {
    // Note: the 0 color is supposed to be invisible if there is a color field
    // but it is used as a default color when there is no color field
    &.o_tag_color_@{size} span {
        background-color: ~"@{flectra-color-@{size}}";
    }
    .o-kanban-tag-color(@size + 1);
}
.o-kanban-record-color(@size: 1) when (@size < @flectra-nb-ui-color) {
    // Note: the 0 color is not defined as it is the 'no color' for kanban
    .oe_kanban_color_@{size}::after {
        background-color: ~"@{flectra-color-@{size}}";
    }
    .o-kanban-record-color(@size + 1);
}
.o-kanban-slim-col() {
    position: relative;
    .o-flex(0, 0, auto);
    margin: 0;
    padding: 0 floor(@o-kanban-group-padding * 0.7);
    cursor: pointer;
}
.o-kanban-header-title() {
    .o-flex-display();
    .o-align-items(center);
    height: @o-kanban-header-title-height;
    line-height: 2.2;
    color: @headings-color;
}
.o-kanban-v-title() {
    .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: floor(-@o-kanban-inside-vgutter * 1.2));
    .o-transform-origin(left, bottom, @z: 0);
    .o-transform(rotate(90deg));
    overflow: visible;
    white-space: nowrap;
    font-size: 15px;
}

// ------- Kanban records mixins -------
.o-kanban-record-title(@font-size) {
    color: @headings-color;
    font-size: @font-size;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0;
}
.o-kanban-dropdown(@padding-base: @o-kanban-inside-vgutter) {
    margin: -1px -1px auto auto; // compensate border
    padding: @padding-base/2 @padding-base;
    border: 1px solid transparent;
    border-bottom: none;
    vertical-align: top;
    color: @text-color;

    &:hover {
        color: @headings-color;
    }
    &:focus, &:active, &:focus:active {
        outline: none;
    }
}
.o-kanban-dropdown-open() {
    position: relative;
    background: white;
    border-color: @gray-lighter-darker;
    z-index: @zindex-dropdown + 1;
}
.o-kanban-dropdown-menu() {
    .o-position-absolute(@right: -1px);
    margin-top: -1px;
    border-color: @gray-lighter-darker;
}
.o-kanban-colorpicker() {
    max-width: 150px;
    padding: 3px (@flectra-dropdown-hpadding - @o-kanban-inner-hmargin) 3px @flectra-dropdown-hpadding;

    > li {
        display: inline-block;
        margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0;
        border: 1px solid white;
        box-shadow: 0 0 0 1px @gray-lighter-dark;

        > a {
            display: block;

            &::after {
                content: "";
                display: block;
                width: 20px;
                height: 15px;
            }
        }

        // No Color
        &:first-child > a {
            position: relative;
            &::before {
                content: "";
                .o-position-absolute(-2px, @left: 10px);
                display: block;
                width: 1px;
                height: 20px;
                .rotate(45deg);
                background-color: red;
            }
            &::after {
                background-color: white;
            }
        }
    }
}

// ------- Kanban View Layout -------
.o_kanban_view {
    .o-flex-display();
    .o-align-content(stretch);
    overflow-x: visible;

    @media (max-width: @screen-xs-max) {
        padding: 0px!important;
        overflow-x: auto;
    }

    .o_kanban_record, .o_kanban_quick_create {
        padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter;
        border: 1px solid @gray-lighter-dark;
        background-color: white;

        @media (max-width: @screen-xs-max) {
            padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter-mobile;
        }
    }

    .o_kanban_quick_create {
        box-shadow: 0 0 20px -10px;
        margin: 0 @o-kanban-record-margin -1px @o-kanban-record-margin;

        input {
            width: 100%;
            margin: 2px 0 8px;
            padding: 3px 6px;
            color: @headings-color;
            font-weight: 500;
        }
    }

    .o_kanban_record {
        position: relative;
        display: inline-block; // Force the creation of a block formatting context to clear float items
        border-color: @gray-lighter-darker;
        min-width: 150px;
        margin: 0 0 -1px;

        // ------- Kanban Record, v11 Layout -------
        // Records colours
        &::after {
            content: "";
            .o-position-absolute(0, auto, 0, -1px);
            width: @o-kanban-color-border-width;
        }

        // Inner Sections
        .o_kanban_record_top, .o_kanban_record_body  {
            margin-bottom: @o-kanban-inner-hmargin;
        }

        .o_kanban_record_top, .o_kanban_record_bottom  {
            .o-flex-display();
        }

        .o_kanban_record_top {
            .o-align-items(flex-start);

            .o_dropdown_kanban {
                // For v11 layout, reset positioning to default to properly use
                // flex-box
                position: relative;
                top: auto;
                right: auto;
            }

            .o_kanban_record_headings {
                line-height: 1.2;
                .o-flex(1, 1, auto);
                // Ensure long word doesn't break out of container
                word-wrap: break-word;
                overflow: hidden;
            }
        }

        .o_kanban_record_title {
            .o-kanban-record-title (@font-size: 13px);
        }

        .o_kanban_record_subtitle {
            display: block;
            margin-top: @o-kanban-inner-hmargin*0.5;
        }

        .o_kanban_record_bottom {
            .oe_kanban_bottom_left, .oe_kanban_bottom_right {
                .o-flex-display();
                .o-align-items(center);
                height: 20px;
            }
            .oe_kanban_bottom_left {
                .o-flex(1, 1, auto);

                > * {
                    margin-right: 6px;
                    line-height: 1;
                }

                .o_priority_star {
                    margin-top: 1px;
                    font-size: 18px;
                }
            }
            .oe_kanban_bottom_right{
                .o-flex(0, 1, auto);

                .oe_kanban_avatar {
                    width: 20px;
                    height: 20px;
                    margin-left: 6px;
                }
            }
            .o_link_muted {
                color: @text-color;
                &:hover {
                    color: @brand-primary;
                    text-decoration: underline;
                }
            }
        }
    }

    // -------  Compatibility of old (<= v10) Generic layouts -------

    // Kanban Records - Uniform Design
    // Provide a basic style for different kanban record layouts
    // ---------------------------------------------------------
    .oe_kanban_card, .o_kanban_record {
        // -------  v11 Layout + generic layouts (~v10) -------
        // Kanban Record - Dropdown
        .o_dropdown_kanban {
            .o-position-absolute(@o-kanban-inside-vgutter, @o-kanban-inside-hgutter);
            visibility: hidden;
            @media (max-width: @screen-xs-max) {
                visibility: visible;
            }

            .dropdown-toggle {
                .o-kanban-dropdown();
                margin: (-@o-kanban-inside-vgutter - 1px) (-@o-kanban-inside-hgutter - 1px) 0 0;
            }
            &.open .dropdown-toggle {
                .o-kanban-dropdown-open();
            }
            .dropdown-menu {
                .o-kanban-dropdown-menu();
                right: (-@o-kanban-inside-hgutter - 1);
            }
        }

        &:hover .o_dropdown_kanban, .o_dropdown_kanban.open {
            visibility: visible;
        }

        // Kanban Record - Dropdown colorpicker
        .oe_kanban_colorpicker {
            .o-kanban-colorpicker();
        }

        // Kanban Record - Inner elements
        .o_field_many2manytags, .o_kanban_tags {
            display: block;
            margin-bottom: @o-kanban-inner-hmargin;
            line-height: 1.2;

            .o_tag {
                display: inline-block;
                margin-right: 4px;
                font-size: 11px;
                font-weight: 500;
                background-color: transparent;
                .o-kanban-tag-color();

                span {
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    margin-right: 4px;
                    border-radius: 100%;
                }
            }
        }

        // Commonly used to place an image beside the text
        // (e.g. Fleet, Employees, ...)
        .o_kanban_image {
            text-align: center;

            img {
                max-width: 100%;
            }
        }

        .o_kanban_button {
            margin-top: 15px;

            > button, > a {
                .o-position-absolute(@right: @o-kanban-record-margin, @bottom: @o-kanban-record-margin);
                @media (max-width: @screen-xs-max) {
                    right: @o-kanban-inside-hgutter-mobile;
                }
            }
        }

        // Kanban Record - Utility classes
        &.oe_kanban_global_click, &.oe_kanban_global_click_edit {
            cursor: pointer;
        }

        &.ui-sortable-helper {
            .o-transform(rotate(-3deg));
            box-shadow: 0 5px 25px -10px black;
            .transition(~"transform 0.6s, box-shadow 0.3s");
        }

        .o_attachment_image > img {
            width: 100%;
            height: auto;
            margin-bottom: @o-kanban-inner-hmargin;
        }

        .o_progressbar {
            .o-flex-display();
            height: @o-kanban-progressbar-height;

            .o_progressbar_title {
                .o-flex(0, 0, auto);
            }
            .o_progress {
                .o-flex(1, 1, auto);
                margin-top: 3px;
            }
            .o_progressbar_value {
                .o-flex(0, 0, auto);
                width: auto;
                height: 100%;
                text-align: right;
            }
            input.o_progressbar_value {
                width: 15%;
                margin-left: 8px;
            }
        }

        .o_kanban_image {
            float: left;
            width: @o-kanban-image-width;

            + div {
                padding-left: @o-kanban-image-width + @o-kanban-inside-hgutter;
                @media (max-width: @screen-xs-max) {
                    padding-left:  @o-kanban-image-width + @o-kanban-inside-hgutter-mobile;
                }
            }
        }

        .oe_kanban_details {
            width: 100%;
            ul {
                margin-bottom: @o-kanban-inner-hmargin*0.5;;
                padding-left: 0;
                list-style: none;
                font-size: @font-size-small;

                li {
                    margin-bottom: 2px;
                }
            }
        }

        .o_kanban_footer {
            .o-flex-display();
            .o-justify-content(space-between);
            .o-align-items(center);
            > * {
                .o-flex(0, 0, auto);
            }
        }

        .oe_kanban_text_red {
            color: #A61300;
            font-weight: bold;
        }

        .o_text_bold {
            font-weight: bold;
        }

        .o_text_block {
            display: block;
        }
    }

    // Kanban Grouped Layout
    &.o_kanban_grouped {
        min-height: 100%;
        padding: 0;
        background-color: @gray-lighter;

        .o_kanban_record, .o_kanban_quick_create {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) {
            width: @o-kanban-small-record-width + 2*@o-kanban-group-padding;
        }
    }

    // Kanban Grouped Layout - Column default
    .o_kanban_group {
        .o-flex(0, 0, auto);
        padding: 0 @o-kanban-group-padding*2 @o-kanban-group-padding @o-kanban-group-padding;

        .o_kanban_header > .o_kanban_header_title {
            .o-kanban-header-title();

            .o_column_title {
                .o-flex(1, 1, auto);
                .o-text-overflow();
                font-size: 16px;
                font-weight: 500;
            }

            .o_column_unfold {
                display: none;
            }

            .o_kanban_quick_add i {
                .o-kanban-icon;
                margin-left: @o-kanban-inside-hgutter*2;
            }

            &:hover .o_kanban_config, .o_kanban_config.open {
                visibility: visible;
                margin-left: @o-kanban-inside-hgutter;
            }

            .o_kanban_config {
                visibility: hidden;

                i {
                    .o-kanban-icon;
                }
            }
        }

        .o_kanban_load_more {
            padding: @o-kanban-record-margin 0;
            box-shadow: inset 0 10px 13px -13px black;
            text-align: center;
        }

        &.ui-sortable-helper {
            box-shadow: 0 0 30px -10px black;
        }

        &:not(.o_column_folded) {
            width: @o-kanban-default-record-width + 2*@o-kanban-group-padding;
        }

        &.o_kanban_dragged {
            background-color: @flectra-main-text-color;

            .o_kanban_record {
                visibility: hidden;
            }
        }
    }

    &.ui-sortable .o_kanban_header_title {
        cursor: move;
    }

    // Kanban Grouped Layout - Column Folded
    .o_kanban_group.o_column_folded {
        .o-kanban-slim-col();
        background-color: @gray-lighter-dark;

        & + .o_kanban_group.o_column_folded {
            margin-left: 1px;
        }

        .o_kanban_header_title {
            position: relative;
            opacity: 0.5;

            .o_column_title {
                .o-kanban-v-title();
            }
            .o_column_unfold {
                .o-kanban-icon(1);
            }
        }

        > .o_kanban_record, .o_kanban_quick_add, .o_kanban_config, .o_kanban_load_more {
            display: none!important;
        }

        &:hover, &.o_kanban_hover {
            .o_kanban_header_title {
                opacity: 1;
            }
        }
    }

    // Kanban Grouped Layout - "Create new column" column
    .o_column_quick_create {
        .o-kanban-slim-col();

        .o_column_header {
            .o-kanban-header-title();
            position: relative;
            opacity: 0.5;

            .o_kanban_title {
                .o-kanban-v-title();
            }

            .o_kanban_add_column {
                .o-kanban-icon(1);
            }
        }

        .o_kanban_quick_create {
            display: none;
            width: @o-kanban-default-record-width;
            height: 100%;
            margin: 0 (-@o-kanban-group-padding/2);
            border: none;
            box-shadow: 0 0 20px -10px;
            background-color: @gray-lighter;

            input, input:focus, input:hover {
                font-size: 16px;
                background: @gray-lighter;
                outline: none;
                box-shadow: none;
                font-weight: 400;
                margin: 0;
            }
        }

        &:hover {
            .o_column_header, .o_kanban_add_column {
                opacity: 1;
            }
        }
    }

    // Kanban UN-grouped Layout
    &.o_kanban_ungrouped {
        .o-flex-flow(row, wrap);
        .o-justify-content(flex-start);

        padding: @o-kanban-record-margin (@flectra-horizontal-padding - @o-kanban-record-margin);

        .o_kanban_record {
            .o-flex(1, 1, auto);
            width: @o-kanban-default-record-width;
            margin: (@o-kanban-record-margin * 0.5) @o-kanban-record-margin;

            @media (max-width: @screen-xs-max) {
                margin: 0 0 -1px 0;
                .o-flex(1, 0, 100%);
            }

            &.o_kanban_ghost {
                height: 0;
                min-height: 0!important; // to prevent view writers to override this height
                visibility: hidden;
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
            }
        }
    }

    // Kanban special layouts
    &.o_kanban_nocontent {
        min-height: 0;
        padding: 0;
    }

    &.o_kanban_mobile .o_kanban_record {
        div.label {
            .o_text_overflow;
        }
    }

    // Records colours
    .o-kanban-record-color();
}