@use "../../color-system/_constants.scss" as *;
@use "../../spacing/index.scss" as *;
@use "../../border-radii/index.scss" as *;
@use "../../mixins/index.scss" as *;
@use "../../z-index/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "./variables.scss" as *;
@use "../toolbar/_variables.scss" as *;
@use "../bubble/_variables.scss" as *;
@use "../button/_variables.scss" as *;
@use "../file-box/_variables.scss" as *;

@mixin kendo-chat--layout-base() {

    // Chat
    .k-chat {
        min-width: $kendo-chat-width;
        min-height: $kendo-chat-height;
        max-height: 100%;
        border-width: $kendo-chat-border-width;
        border-radius: $kendo-chat-border-radius;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-chat-font-family;
        font-size: $kendo-chat-font-size;
        line-height: $kendo-chat-line-height;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        .k-suggestion {
            font-size: var(--kendo-font-size-sm);
        }
    }

    // Chat header
    .k-chat-header {
        flex-shrink: 0;
        width: 100%;
        position: sticky;
        z-index: k-z-index("banner");
        border-inline-width: 0;
        border-block-start-width: 0;
        @include border-top-radius($kendo-chat-border-radius);
        @include border-bottom-radius(0);
    }

    // Message list
    .k-message-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    .k-message-list-content {
        padding-block: $kendo-chat-message-list-padding-y;
        padding-inline: $kendo-chat-message-list-padding-x;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;

        > * + * {
            margin-block-start: $kendo-chat-message-list-spacing;
        }

        &.k-message-list-content-empty {
            flex: 1;
            flex-flow: column wrap;
            align-content: center;
            justify-content: center;
        }
    }

    // Message group
    .k-message-group {
        max-width: $kendo-chat-message-max-width;
        background: none;
        box-sizing: border-box;
        display: flex;
        column-gap: $kendo-chat-message-gap;
        flex-shrink: 0;
        position: relative;

        .k-message + .k-message {
            margin-block-start: $kendo-chat-bubble-spacing;
        }

        .k-avatar {
            align-self: flex-start;
        }

        &:has(.k-message-author) .k-avatar {
            margin-block-start: calc( #{$kendo-chat-author-font-size} * #{$kendo-chat-author-line-height} + $kendo-chat-bubble-spacing );
        }

        > .k-chat-user-status-wrapper {
            position: relative;
            align-self: flex-start;
            overflow: hidden;
        }

        .k-chat-user-status {
            display: flex;
            width: auto;
            min-width: $kendo-chat-status-min-size;
            max-width: $kendo-chat-status-max-size;
            height: auto;
            min-height: $kendo-chat-status-min-size;
            max-height: $kendo-chat-status-max-size;
            overflow: hidden;
            position: absolute;
            bottom: 0;
            inset-inline-end: 0;
            border-radius: k-border-radius(full);
        }
    }

    .k-message-group-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .k-chat-message-toolbar {
        border: 0;
        padding: k-spacing(1px);
        place-self: start;
    }

    .k-chat-download-button-wrapper {
        width: 100%;
        box-sizing: border-box;
        border-radius: 0 0 $kendo-file-box-border-radius $kendo-file-box-border-radius;
        text-align: start;
    }

    .k-message-group-sender {
        align-self: flex-end;
        flex-direction: row-reverse;

        .k-chat-bubble {
            place-self: flex-end;
        }

        .k-message-group-content {
            align-items: flex-end;
        }

        .k-message-info {
            justify-content: flex-end;
        }

        .k-message-time {
            order: -1;
        }

        .k-message:has(+.k-message) .k-chat-bubble {
            border-end-end-radius: $kendo-sequential-messages-border-radius;
            border-end-start-radius: $kendo-bubble-border-radius;
            border-start-end-radius: $kendo-sequential-messages-border-radius;
            border-start-start-radius: $kendo-bubble-border-radius;
        }

        .k-message + .k-message .k-chat-bubble {
            border-start-end-radius: $kendo-sequential-messages-border-radius;
            border-start-start-radius: $kendo-bubble-border-radius;
            border-end-start-radius: $kendo-bubble-border-radius;
        }

        .k-message:last-of-type .k-chat-bubble {
            border-end-start-radius: $kendo-bubble-border-radius;
            border-start-start-radius: $kendo-bubble-border-radius;
        }
    }

    // Message
    .k-message {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: margin k-transition(fade-out);
        outline: none;
        overflow-wrap: break-word;

        .k-chat-message-link {
            font-weight: bold;
            text-decoration: underline;
        }

        .k-chat-bubble {
            border-end-start-radius: $kendo-bubble-border-radius;
        }

        &:has(+.k-message) .k-chat-bubble {
            border-end-start-radius: $kendo-sequential-messages-border-radius;
            border-start-start-radius: $kendo-sequential-messages-border-radius;
        }

        & + .k-message .k-chat-bubble {
            border-start-start-radius: $kendo-sequential-messages-border-radius;
        }

        .k-file-box-wrapper {
            padding: 0;
        }
    }

    // Failed message
    .k-message-failed {
        flex-flow: row wrap;
        align-items: center;
        justify-content: end;
        column-gap: k-spacing(1);

        .k-bubble {
            max-width: calc(100% - #{$kendo-button-md-inner-calc-size});
        }
    }

    .k-chat-bubble-text {
        text-overflow: ellipsis;
        overflow: hidden;
        flex-shrink: 0;

        overflow-wrap: break-word;
        white-space: pre-wrap;

        &:has(.k-skeleton-container) {
            white-space: normal;
        }
    }

    // Full-width message
    .k-message-group-full-width {
        width: 100%;
        max-width: 100%;

        &.k-message-group-sender .k-message:has(.k-skeleton) {
            align-self: stretch;
        }

        .k-chat-bubble:has(.k-skeleton) {
            width: 100%;
        }
    }

    // Expandable messages
    .k-chat-bubble.k-bubble-expandable {
        .k-bubble-content {
            height: auto;
            transition: height k-transition(shrink);
        }
    }

    .k-chat-bubble.k-bubble-expandable:not(.k-expanded) {
        .k-bubble-content {
            height: calc( $kendo-chat-line-height * $kendo-chat-font-size);
        }

        .k-chat-bubble-text {
            white-space: nowrap;
        }
    }

    .k-chat-bubble:has(.k-typing-indicator) {
        pointer-events: none;
    }

    // Message meta
    .k-message-info {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        gap: k-spacing(1);
    }

    .k-message .k-selected + .k-message-info,
    .k-message:has(.k-message-failed-content) .k-message-info {
        margin-block-start: k-spacing(1);
    }

    .k-message-time,
    .k-message-status,
    .k-message-failed-content {
        font-size: $kendo-chat-message-meta-font-size;
        line-height: $kendo-chat-message-meta-line-height;
        white-space: nowrap;
        pointer-events: none;
        overflow: hidden;
    }

    .k-message-time,
    .k-message-status {
        transition: height k-transition(fade-out);
        height: 0;
    }

    .k-message-time {
        place-self: center;
    }

    .k-message-status {
        display: inline-flex;
        align-items: center;
        gap: calc( #{$kendo-chat-message-status-gap} / 2);
    }

    .k-message-failed-content {
        display: flex;
        align-items: center;
        gap: k-spacing(1);
    }

    // Bubble
    .k-chat-bubble {
        width: fit-content;
        max-width: 100%;
        overflow: hidden;
        overflow-wrap: break-word;
        text-align: start;

        .k-bubble-content {
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: $kendo-chat-message-gap;
            transition: height k-transition(fade-out);
        }

        a {
            color: inherit;
            text-decoration: underline;
            font-weight: bold;
        }
    }

    .k-bubble-content {
        .k-message-reference {
            border-radius: k-border-radius(md);
        }
    }

    // Message states
    .k-message:has(.k-selected) {
        .k-message-time,
        .k-message-status {
            height: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size);
            transition: height k-transition(fade-in);
        }
    }

    .k-message:has(.k-selected + .k-message-status),
    .k-message:has(.k-message-time + .k-selected) {
        gap: $kendo-chat-bubble-spacing;
    }

    .k-message-error,
    .k-message-sending {
        margin-block-end: $kendo-chat-item-spacing-y;

        .k-message-status {
            height: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size);
        }
    }

    // Message reference
    .k-message-reference {
        padding-inline: $kendo-chat-message-reference-padding-x;
        padding-block: $kendo-chat-message-reference-padding-y;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
        position: relative;
        white-space: nowrap;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-chat-font-family;
        font-size: $kendo-chat-font-size;
        line-height: $kendo-chat-line-height;

        > .k-icon {
            flex-shrink: 0;
        }
    }

    .k-message-reference-content {
        padding-block: calc( #{$kendo-chat-message-reference-padding-y} / 2 );
        padding-inline-start: calc( 3 * $kendo-chat-message-reference-padding-x);
        padding-inline-end: calc( #{$kendo-chat-message-reference-padding-x} / 2 );
        box-sizing: border-box;
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        &::before {
            display: inline-block;
            content: "";
            position: absolute;
            inset-inline-start: $kendo-chat-message-reference-padding-x;
            height: calc( 100% - #{$kendo-chat-message-reference-padding-y} );
            width: 2px;
            margin-block: auto;
            top: 0;
            bottom: 0;
        }
    }

    .k-message-pinned {
        position: sticky;
        top: 0;
        z-index: k-z-index("banner");
        width: 100%;
        border-block-end-width: $kendo-chat-message-pinned-border-width;
        border-block-end-style: $kendo-chat-message-pinned-border-style;
        cursor: pointer;
        @include border-top-radius($kendo-chat-border-radius);
        @include border-bottom-radius(0);
    }

    .k-chat-header + .k-message-list .k-message-pinned {
        border-radius: 0;
    };

    .k-message-removed {
        font-style: italic;
    }

    // Author
    .k-message-author {
        margin-block-end: $kendo-chat-bubble-spacing;
        font-size: $kendo-chat-author-font-size;
        line-height: $kendo-chat-author-line-height;
        font-weight: bold;
    }

    // Timestamp and event
    .k-timestamp,
    .k-chat-event {
        font-size: $kendo-chat-timestamp-font-size;
        line-height: $kendo-chat-timestamp-line-height;
        display: flex;
        align-items: center;
        gap: $kendo-chat-timestamp-separator-spacing;
    }

    // Timestamp
    .k-timestamp {
        text-transform: $kendo-chat-timestamp-transform;
        align-self: stretch;
        align-self: center;
    }

    // Events
    .k-chat-event {
        width: 100%;
        justify-content: center;
    }

    .k-message-box-wrapper {
        padding-inline: $kendo-chat-padding-x;
        padding-block: $kendo-chat-padding-y;
        display: flex;
        flex-direction: column;
        gap: $kendo-chat-message-box-wrapper-spacing;
    }

    // Message box
    .k-message-box {
        width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;

        .k-input-prefix-horizontal {
            display: inline-block;
        }

        &:focus,
        &.k-focus,
        &:focus-within {
            outline: 0;
            box-shadow: none;
        }

        .k-input-prefix,
        .k-input-suffix {
            width: 100%;
            padding: k-spacing(1);
        }
    }

    .k-chat-bubble,
    .k-message-box {
        .k-message-reference {
            padding-inline: calc( #{$kendo-chat-message-reference-padding-x} / 2);
            padding-block: calc( #{$kendo-chat-message-reference-padding-y} / 2);
        }
    }

    .k-chat-file-download-wrapper {
        display: flex;
        flex-direction: column;
    }

    // Card list
    .k-chat .k-card-list {
        margin: $kendo-chat-bubble-spacing 0 0;
    }

    .k-message-group-sender + .k-card-list,
    .k-message-group-sender + .kendo-chat-message-attachments.k-card-list {
        align-self: flex-end;
    }

    .k-chat .k-card-deck {
        max-width: calc(100% + calc( #{$kendo-chat-message-list-padding-y} * 2 )); // prevent overflowing in the parent element
        box-sizing: border-box;
        margin-inline-start: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        margin-inline-end: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x;
        overflow: hidden;
        overflow-x: auto;
        scroll-behavior: smooth;
    }
    .k-chat .k-card-deck .k-card {
        width: 200px;
    }

    .k-chat .k-card-deck-scrollwrap {
        margin-inline-end: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        margin-inline-start: calc( #{$kendo-chat-message-list-padding-y} * -1 );
        padding-inline-start: $kendo-chat-message-list-padding-y;
        padding-inline-end: $kendo-chat-message-list-padding-y;
    }

    .k-chat .k-card-deck-scrollwrap > .k-card-deck {
        // hide scrollbar in chat
        $scrollbar-size: 20px;

        margin-block-end: -$scrollbar-size;
        padding-block-end: $scrollbar-size;
    }

    // Deck
    .k-chat .k-card-deck .k-card-wrap {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 0 0 auto;
        padding-block-end: 5px; // accommodate for focused box shadow on OSX

        .k-card {
            flex: 0 0 auto;
        }

        &.k-selected {
            background: none;
        }
    }


     // Typing indicator
    .k-typing-indicator {
        display: inline-flex;
        gap: k-spacing(1);
        flex-flow: row nowrap;

        span {
            width: k-spacing(2);
            height: k-spacing(2);
            border-radius: 50%;
            flex: 0 0 k-spacing(2);
            background-color: currentColor;
            opacity: .25;
            @for $i from 1 through 3 {
                &:nth-of-type(#{$i}) {
                    animation: 1s k-animation-blink infinite ($i * .3333s);
                }
            }
        }

        @keyframes k-animation-blink {
            50% {
                opacity: .5;
            }
        }
    }

    // Scroll to bottom container
    .k-chat-scroll-to-bottom-container {
        display: flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        position: sticky;
        bottom: k-spacing(4);

        .k-fab {
            position: static;
        }
    }

    // Upload
    .k-chat-upload {
        .k-external-dropzone {
            height: auto;
        }

        .k-upload {
            margin-block-start: k-spacing(6);
        }

        .k-upload-files {
            max-height: 7rem;
        }
    }

    .k-rtl,
    [dir="rtl"] {
        .k-message-box {
            .k-button {
                transform: scaleX(-1);
            }
        }
    }
}