@use "../../mixins/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "../../_variables.scss" as *;
@use "./variables.scss" as *;

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

    // Chat
    .k-chat {
        @include fill(
            $kendo-chat-text,
            $kendo-chat-bg,
            $kendo-chat-border
        );
    }

    // Message meta
    .k-timestamp {
        @include fill(
            $kendo-chat-timestamp-text,
            $kendo-chat-timestamp-bg
        );

        &::before,
        &::after {
            background-color: $kendo-chat-timestamp-separator-bg;
        }
    }

    // Message status
    .k-message-status {
        @include fill(
            $kendo-chat-status-text
        );
    }

    // Bubbles
    .k-message-group-sender .k-chat-bubble {
        @include fill(
            $kendo-chat-alt-bubble-text,
            $kendo-chat-alt-bubble-bg,
            $kendo-chat-alt-bubble-border
        );

        @include box-shadow( $kendo-chat-alt-bubble-shadow );

        &:active,
        &.k-active,
        &.k-selected {
            @include fill( $bg: $kendo-chat-alt-bubble-active-bg, $border: $kendo-chat-alt-bubble-active-border );
        }

        &:focus,
        &.k-focus {
            @include fill( $bg: $kendo-chat-alt-bubble-focus-bg, $border: $kendo-chat-alt-bubble-focus-border );
            @include focus-indicator( $kendo-chat-alt-bubble-focus-shadow, true, true );
        }

        &:hover,
        &.k-hover {
            @include fill( $bg: $kendo-chat-alt-bubble-hover-bg, $border: $kendo-chat-alt-bubble-hover-border );
        }
    }

    .k-message-failed .k-chat-bubble {
        @include fill(
            $kendo-chat-failed-bubble-text,
            $kendo-chat-failed-bubble-bg,
            $kendo-chat-failed-bubble-border
        );

        &:hover,
        &.k-hover {
            background-color: $kendo-chat-failed-bubble-hover-bg;
            border-color: $kendo-chat-failed-bubble-border;
        }

        &.k-selected {
            background-color: $kendo-chat-failed-bubble-selected-bg;
            border-color: $kendo-chat-failed-bubble-border;
        }
    }

    .k-message-failed-content {
        color: $kendo-chat-failed-content-color;
    }

    // Typing indicator
    .k-typing-indicator {
        @include fill(
            $kendo-chat-typing-indicator-text
        );
    }

    // Chat attachment
    .k-message-group-sender .k-file-box {
        background-color: $kendo-chat-sender-file-bg;
        color: $kendo-chat-sender-file-text;
        border-color: $kendo-chat-sender-file-border;
    }

    // Message reference
    .k-message-reference {
        @include fill(
            $kendo-chat-message-reference-text,
            $kendo-chat-message-reference-bg
        );
        backdrop-filter: blur(2px);
    }

    .k-message-reference-sender {
        .k-message-reference-content {
            &::before {
                background-color: $kendo-chat-message-reference-marker-alt-bg;
            }
        }
    }

    .k-message-reference-content {
        &::before {
            background-color: $kendo-chat-message-reference-marker-bg;
        }
    }

    // Pinned message
    .k-message-pinned {
        border-color: $kendo-chat-message-pinned-border-color;
    }

    // Toolbar
    .k-chat-toolbar,
    .k-chat .k-toolbar-box {
        @include fill(
            $kendo-chat-toolbar-text,
            $kendo-chat-toolbar-bg,
            $kendo-chat-toolbar-border
        );
    }

}