.o_kanban_record {
    --fieldWidget-display: block;
    --Tag-max-width: 100%;
    --Tag-font-size: #{$o-font-size-base-smaller};
    --Tags-margin: calc(1em - var(--Tag-font-size, .75rem)) 0;

    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 150px;
    margin: 0 0 (-$border-width);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    break-inside: avoid;

    &:first-of-type {
        margin-top: 1px;
    }

    // do not break wrap inside buttons
    button {
        word-wrap: normal;
        word-break: normal;
    }

    @include media-only(print) {
        font-size: 0.8rem;
    }

    &:not(.o_kanban_ghost) {
        padding: var(--KanbanRecord-padding-v) var(--KanbanRecord-padding-h);
        border-width: var(--KanbanRecord-border-width, #{$border-width});
        border-style: solid;
        border-color: $border-color;
        background-color: $o-view-background-color;

        @include media-only(print) {
            .o_field_background_image {
                height: auto;
            }

            div.o_field_widget.o_field_background_image > img {
                position: relative;
            }
        }
    }

    &:where(:not(.row)) {
        flex-flow: column;

        main {
            flex-grow: 1;
        }

        aside {
            flex: 0 0 var(--KanbanRecord__image-width);
        }
    }

    > main {
        display: flex;
        flex-flow: column;
        min-width: 0;
        height: 100%;

        @include media-only(print) {
            height: auto;
        }
    }

    > footer, > main > footer {
        display: flex;
        align-items: center;
        column-gap: var(--Card-Footer-gap, #{map-get($spacers, 2)});
        margin-top: auto;
        padding-top: var(--KanbanRecord-padding-v);
        font-size: var(--Card-Footer-font-size, .875rem);
    }

    aside {
        img {
            height: var(--KanbanRecord__image-height, var(--KanbanRecord__image-width));

            @include media-only(print) {
                height: auto;
            }
        }

        &.o_kanban_aside_full {
            --KanbanRecord__image-height: 100%;
            --KanbanRecord__image-width: var(--KanbanRecord__image--fill-width);

            @include media-only(print) {
                --KanbanRecord__image-height: auto;
            }

            .o_kanban_image_fill {
                min-height: var(--KanbanRecord__image-fill-width);
                max-height: var(--KanbanRecord__image-max-height, $o-kanban-image-fill-width * 1.5);

                @include media-only(print) {
                    height: auto;
                }
            }

            > * {
                @include media-breakpoint-up(md) {
                    height: calc(100% + var(--KanbanRecord-padding-v)* 2);
                    margin-top: calc(var(--KanbanRecord-padding-v)* -1);
                    margin-bottom: calc(var(--KanbanRecord-padding-v)* -1);
                    margin-left: calc(var(--KanbanRecord-padding-h)* -1);
                }

                @include media-only(print) {
                    height: auto;
                }
            }
        }
    }

    &.o_kanban_global_click {
        cursor: pointer;
    }

    .o_dropdown_kanban {
        visibility: hidden;

        @include media-breakpoint-down(md) {
            visibility: visible;
        }
    }

    &:hover .o_dropdown_kanban,
    .o_dropdown_kanban:has(.show) {
        visibility: visible;
    }

    .o_attachment_image > img {
        width: 100%;
        height: auto;
        border-radius: var(--Attachment-Image-border-radius, #{$border-radius});
    }

    // Records colours
    @for $size from 2 through length($o-colors) {
        // Note: the first color is not defined as it is the 'no color' for kanban
        &.o_kanban_color_#{$size - 1}::after {
            $-color: nth($o-colors, $size);

            @include o-position-absolute(0, auto, 0, -$border-width);
            border-left: $border-width solid rgba($-color, 0.5);
            border-right: ($border-width * 2) solid $-color;
            content: "";
        }
    }

    &.o-kanban-button-new {
        border-radius: 0;
        text-align: center;
        justify-content: center;

        &:focus-within, &:hover {
            background-color: $gray-100;
        }
    }

    &.o_record_selected {
        background-color: var(--KanbanColumn__highlight-selected);
    }
}

.o_kanban_record:focus-visible, .o_kanban_selection_active .o_kanban_record:focus {
    outline: none;
    box-shadow: inset 0 0px 0px 3px var(--KanbanColumn__highlight-selected-border);
}

.o_kanban_ungrouped .o_kanban_record:focus-visible, .o_kanban_selection_active .o_kanban_ungrouped .o_kanban_record:focus {
    @include media-breakpoint-up(md) {
        outline: 3px solid var(--KanbanColumn__highlight-selected-border);
        box-shadow: none;
    }
}

.o_kanban_selection_available .o_kanban_record.o_record_selection_available {
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.1);
    }
    &:hover {
        &::after {
            background-color: rgba(0, 0, 0, 0.5);
        }
        .o_record_selection_tooltip {
            display: block !important;
            z-index: 1;
            transform: translate(-50%, -50%);
            background: white;
            color: black;
        }
    }
}

@include media-breakpoint-down(md) {
    .o_field_x2many_kanban.o_kanban_mobile .o_kanban_record:not(.o_kanban_ghost):not(.o-kanban-button-new) {
        border: none;

        &:not(:last-of-type) {
            border-bottom: $border-width solid $border-color;
        }
    }
    .o_kanban_ungrouped .o_kanban_record {
        --KanbanRecord-border-width: #{$border-width} 0;
    }
}