@use "sass:math";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-chat--layout() {
    .k-chat {
        margin: auto;
        max-width: var( --kendo-chat-width, #{ $kendo-chat-width } );
        height: var( --kendo-chat-height, #{ $kendo-chat-height } );
        max-height: 100%;
        border-width: var( --kendo-chat-border-width, #{ $kendo-chat-border-width } );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-chat-font-family, #{ $kendo-chat-font-family } );
        font-size: var( --kendo-chat-font-size, #{ $kendo-chat-font-size } );
        line-height: var( --kendo-chat-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;


        // 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-inline: var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } );
            padding-block: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );
            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: var( --kendo-chat-message-list-spacing, #{ $kendo-chat-message-list-spacing } );
            }
        }

        // Message group
        .k-message-group {
            max-width: 80%;
            background: none;
            box-sizing: border-box;
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            position: relative;
        }
        .k-message-group:not(.k-alt) {
            align-items: flex-start;
            text-align: start;

            .k-message-time {
                margin-inline-start: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );
                inset-inline-start: 100%;
            }
            .k-message-status {
                inset-inline-start: 0;
            }

            .k-first .k-chat-bubble,
            .k-only .k-chat-bubble {
                border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
            }
            .k-middle .k-chat-bubble,
            .k-last .k-chat-bubble {
                border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
            }
        }
        .k-message-group.k-alt {
            align-self: flex-end;
            align-items: flex-end;
            text-align: end;

            .k-message-time {
                margin-inline-end: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );
                inset-inline-end: 100%;
            }
            .k-message-status {
                inset-inline-end: 0;
            }

            .k-first .k-chat-bubble,
            .k-only .k-chat-bubble {
                border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
            }
            .k-middle .k-chat-bubble,
            .k-last .k-chat-bubble {
                border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
            }
        }


        // Message
        .k-message {
            max-width: 100%;
            margin: var( --kendo-chat-bubble-spacing, #{ $kendo-chat-bubble-spacing } ) 0 0;
            position: relative;
            transition: margin .2s ease-in-out;
            outline: none;
        }


        // Message meta
        .k-message-time,
        .k-message-status {
            font-size: $kendo-chat-message-meta-font-size;
            line-height: $kendo-chat-message-meta-line-height;
            white-space: nowrap;
            pointer-events: none;
            position: absolute;
        }
        .k-message-time {
            opacity: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: opacity .2s ease-in-out;
        }
        .k-message-status {
            margin-block-start: var( --kendo-chat-bubble-spacing, #{ $kendo-chat-bubble-spacing } );
            height: 0;
            overflow: hidden;
            top: 100%;
            transition: height .2s ease-in-out;
        }


        // Bubble
        .k-chat-bubble {
            @include border-radius( var( --kendo-chat-bubble-border-radius, #{ $kendo-chat-bubble-border-radius } ) );
            padding-inline: var( --kendo-chat-bubble-padding-x, #{ $kendo-chat-bubble-padding-x } );
            padding-block: var( --kendo-chat-bubble-padding-y, #{ $kendo-chat-bubble-padding-y } );
            border-width: 1px;
            border-style: solid;
            line-height: var( --kendo-chat-bubble-line-height, #{ $kendo-chat-bubble-line-height } );
            word-wrap: break-word;
            white-space: pre-wrap;

            a {
                color: inherit;
                text-decoration: underline;
            }
        }


        // Message states
        .k-message.k-selected {
            margin-block-end: var( --kendo-chat-item-spacing-y, #{ $kendo-chat-item-spacing-y } );
            border: 0;
            color: inherit;
            background: none;

            .k-message-time { opacity: 1; }
            .k-message-status { height: 1.2em; }
        }
        .k-message-error,
        .k-message-sending {
            margin-block-end: var( --kendo-chat-item-spacing-y, #{ $kendo-chat-item-spacing-y } );

            .k-message-status { height: 1.2em; }
        }

        // Avatar
        .k-avatar {
            margin: 0;
            position: absolute;

            @at-root .k-message-group:not(.k-alt) > .k-avatar {
                inset-inline-start: 0;
                bottom: 0;
            }
            @at-root .k-message-group.k-alt > .k-avatar {
                inset-inline-end: 0;
                bottom: 0;
            }
        }
        .k-avatars {
            .k-message-group:not(.k-alt, .k-no-avatar) {
                padding-inline-start: calc( #{$kendo-chat-avatar-size} + #{ $kendo-chat-avatar-spacing } );
            }
            .k-message-group.k-alt:not(.k-no-avatar) {
                padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{ $kendo-chat-avatar-spacing } );
            }
        }
    }

    // Author
    .k-author {
        margin: 0;
        font-size: $kendo-chat-author-font-size;
        line-height: $kendo-chat-author-line-height;
    }
    .k-chat .k-author {
        margin: 0; // Duplicate styles because of typography module
    }


    // Timestamp
    .k-chat .k-timestamp {
        font-size: var( --kendo-chat-timestamp-font-size, #{ $kendo-chat-timestamp-font-size } );
        line-height: var( --kendo-chat-timestamp-line-height, #{ $kendo-chat-timestamp-line-height } );
        text-transform: var( --kendo-chat-timestamp-transform, #{ $kendo-chat-timestamp-transform } );
        text-align: center;
        align-self: stretch;
    }


    // Quick reply
    .k-quick-replies {
        display: block;
        max-width: 100%; // IE fix
    }
    .k-quick-reply {
        @include border-radius( 100px );
        margin-inline-end: var( --kendo-chat-quick-reply-spacing, #{ $kendo-chat-quick-reply-spacing } );
        margin-block-end: calc( var( --kendo-chat-quick-reply-spacing, #{ $kendo-chat-quick-reply-spacing } ) / 2 );
        padding-inline: var( --kendo-chat-quick-reply-padding-x, #{ $kendo-chat-quick-reply-padding-x } );
        padding-block: var( --kendo-chat-quick-reply-padding-y, #{ $kendo-chat-quick-reply-padding-y } );
        border-width: 1px;
        border-style: solid;
        border-color: currentColor;
        background: none;
        color: inherit;
        position: relative;
        line-height: var( --kendo-chat-quick-reply-line-height, #{ $kendo-chat-quick-reply-line-height } );
        cursor: pointer;
        user-select: none;
        display: inline-block;
        flex: 0 0 auto;
        transition-property: color, background-color, border-color;
        transition-duration: .2s;
        transition-timing-function: ease-in-out;
        outline: none;

        &:focus::after,
        &.k-focus::after {
            content: "";
            position: absolute;
            border: medium none;
            border-radius: var(--kendo-border-radius-full, 9999px);
            inset: var( --kendo-chat-quick-reply-focus-offset, #{$kendo-chat-quick-reply-focus-offset} );
            outline-width: var( --kendo-chat-quick-reply-focus-outline-width, #{$kendo-chat-quick-reply-focus-outline-width} );
            outline-style: var( --kendo-chat-quick-reply-focus-outline-style, #{$kendo-chat-quick-reply-focus-outline-style} );
            z-index: 1;
        }
    }


    // Scrollable quick replies
    .k-scrollable-quick-replies {
        margin-block: calc( var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } ) * -1 );
        padding-block: calc( var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } ) * -1 );
        display: flex;
        flex-flow: row nowrap;
        flex: 0 0 auto;
        overflow-x: auto;
        overflow-y: hidden;

        &::-webkit-scrollbar {
            display: none;
        }

        .k-quick-reply {
            margin: 0;
        }
        .k-quick-reply + .k-quick-reply {
            margin-inline-start: var( --kendo-chat-quick-reply-spacing, #{ $kendo-chat-quick-reply-spacing } );
        }
    }


    // Message box
    .k-message-box {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: inherit !important; // stylelint-disable-line declaration-no-important
        border-radius: 0 !important; // stylelint-disable-line declaration-no-important
        flex: none;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

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

        // Input
        .k-input {}

        .k-button {
            border-width: 0;
            flex-shrink: 0;

            svg {
                width: 20px;
                height: 20px;
                fill: currentColor;
                display: inline-block;
            }
        }
    }

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

}

@mixin kendo-chat-card--layout() {
    .k-chat .k-card-list {
        margin: $kendo-chat-bubble-spacing 0 0;
    }

    .k-message-group.k-alt + .k-card-list,
    .k-message-group.k-alt + 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: calc( var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } ) * -1 );
        padding-block-start: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );
        padding-block-end: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );
        padding-inline: var( --kendo-chat-message-list-padding-x, #{ $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: calc( var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } ) * -1 );
        padding-inline: var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } );
    }

    .k-chat .k-card-deck-scrollwrap > .k-card-deck {
        // hide scrollbar in chat
        margin-block-end: calc( var( --kendo-card-deck-scrollbar-size, #{ $kendo-card-deck-scrollbar-size } ) * -1 );
        padding-bottom: var( --kendo-card-deck-scrollbar-size, #{ $kendo-card-deck-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-bottom: 5px; // accommodate for focused box shadow on OSX

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

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

}

@mixin kendo-chat-typing-indicator--layout() {
    // Typing indicator
    .k-typing-indicator {
        padding: 0;
        border-radius: 50px;
        display: inline-flex;
        flex-flow: row nowrap;

        span {
            width: var( --kendo-chat-typing-indicator-dot-size, #{ $kendo-chat-typing-indicator-dot-size } );
            height: var( --kendo-chat-typing-indicator-dot-size, #{ $kendo-chat-typing-indicator-dot-size } );
            border-radius: 50%;
            flex: 0 0 var( --kendo-chat-typing-indicator-dot-size, #{ $kendo-chat-typing-indicator-dot-size } );
            background-color: currentColor;
            opacity: .4;
            @for $i from 1 through 3 {
                &:nth-of-type(#{$i}) {
                    animation: 1s k-animation-blink infinite ($i * .3333s);
                }
            }
        }
        span + span {
            margin-inline-start: var( --kendo-chat-typing-indicator-dot-spacing, #{ $kendo-chat-typing-indicator-dot-spacing } );
        }

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

    }

}

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

    .k-chat-toolbar,
    .k-chat .k-toolbar-box {
        padding-inline: var( --kendo-chat-toolbar-padding-x, #{ $kendo-chat-toolbar-padding-x } );
        padding-block: var( --kendo-chat-toolbar-padding-y, #{ $kendo-chat-toolbar-padding-y } );
        width: 100%;
        border-width: 1px 0 0;
        box-sizing: border-box;
        flex: none;
        overflow: hidden;
        position: relative;
        gap: var( --kendo-chat-toolbar-spacing, #{$kendo-chat-toolbar-spacing} );

        &::before {
            display: none;
        }

        .k-button-list {
            // Needed for native scrolling. Will uncoment when it's implemented.
            // margin-block-end: -20px;
            // padding-bottom: 20px;
            display: flex;
            flex-flow: row nowrap;
            overflow: hidden;
            // overflow-x: auto;
            scroll-behavior: smooth;
        }

        .k-button {
            flex: none;
        }


        .k-scroll-button {
            // IMPORTANT: if we don't set padding, the browser will set for us
            padding-block: 0;
            padding-inline: var( --kendo-chat-scroll-button, #{ $kendo-chat-scroll-button } );
            height: 100%;
            aspect-ratio: auto;
            position: absolute;
            z-index: 2;
            top: 0;

            .k-button-icon {
                min-width: auto;
                min-height: auto;
            }
        }
        .k-scroll-button-left {
            left: 0;
        }
        .k-scroll-button-right {
            right: 0;
        }
    }

}