@font-face {
    font-family: 'emojifont';
    src: local('Segoe UI'),
         local('Apple Color Emoji'),
         local('Android Emoji'),
         local('Noto Color Emoji'),
         local('Twitter Color Emoji'),
         local('Twitter Color'),
         local('EmojiOne Color'),
         local('EmojiOne'),
         local(EmojiSymbols),
         local(Symbola);
}

.o_thread_composer {
    flex: 0 0 auto;
    display: flex;
    border-top: none;
    background: theme-color('light');

    .o_composer, .o_composer_subject {
        position: relative;
        background: white;

        textarea, input {
            border: none;
        }
    }

    .o_composer_subject {
        display: flex;
        padding-bottom: 5px;

        > input {
            flex: 1 1 auto;
            padding: 5px;
            margin-right: 30px;
        }
    }

    .o_composer {
        .o_composer_input > textarea {
            width: 100%;
            resize: none;
        }
        .o_composer_mention_dropdown .o_mention_proposition {
            @include o-text-overflow;
            width: 100%;
            padding: 3px 15px;
            .o_mention_name {
                font-weight: 500;
            }
            .o_mention_info {
                font-style: italic;
                color: gray;
            }
            .fa {
                font-size: 0.8em;
            }
        }
        textarea {
            resize: none;
        }
        .btn.fa {
            @include o-hover-opacity($default-opacity: 0.8, $hover-opacity: 1);
            border: none;
        }
        .o_composer_button_full_composer {
            @include o-position-absolute(auto, 0);
        }

        .o_mail_emoji_container {
            padding: 0 $o-mail-chatter-gap $o-mail-chatter-gap 0;
            border: 1px solid gray('300');
            border-width: 1px 0 0 0;
            background-color: theme-color('light');

            .o_mail_emoji {
                margin: $o-mail-chatter-gap 0 0 $o-mail-chatter-gap;
                cursor: pointer; // only in the popover
                min-width: 22px;
                min-height: 22px;
            }
        }
    }

    // Both inline and not-inline design. Mini-composer disabled.
    &:not(.o_chat_mini_composer) {
        padding:  $o-mail-thread-avatar-size*0.5;
        padding-left: $grid-gutter-width*0.5 + $o-mail-thread-avatar-size + $o-mail-chatter-gap;
        border: 1px solid gray('300');
        border-top: none;

        .o_chatter_avatar {
            @include o-position-absolute(0, $left:  -$o-mail-thread-avatar-size - $o-mail-chatter-gap);
        }

        .o_chatter_composer_info, .o_composer_suggested_partners {
            flex: 0 0 100%;
            margin-bottom: $o-mail-chatter-gap*0.5;
        }

        .o_composer_container {
            position: relative;
        }

        .o_composer {
            border-radius: 2px;
            textarea {
                padding-top: $o-mail-chatter-gap !important;
                padding-right: $grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer
            }

            .o_mail_emoji_container {
                margin: 0 -$o-mail-chatter-gap;
            }

            @include media-breakpoint-down(sm) {
                .o_composer_button_send {
                    color: $o-brand-primary;
                }
            }
        }

        .o_composer, .o_composer_subject {
            border: 1px solid gray('300');

            textarea, input {
                padding: 0 0 $o-mail-chatter-gap;
                border: none;
            }
        }
        .o_composer_subject {
            border-bottom: 0;
            border-radius: 2px 2px 0 0;
        }

        .o_chatter_composer_tools {
            border-top: 1px solid gray('300');
        }

        &:not(.o_chat_inline_composer) {
            flex-flow: row wrap;

            .o_composer_container {
                max-width: 100%;
            }
            .o_composer_container, .o_composer_button_send {
                flex: 1 0 100%;
            }
            .o_composer, .o_composer_subject {
                padding: 0 $o-mail-chatter-gap 0;
            }
            .o_composer_send {
                margin-top: $o-mail-chatter-gap;

                > .o_composer_button_discard:not(:hover) {
                    background: theme-color('light');
                    border-color: transparent;
                }
            }
        }

        &.o_chat_inline_composer {
            .o_composer_container {
                flex: 1 1 auto;
            }
            .o_composer {
                padding: $o-mail-chatter-gap $o-mail-chatter-gap 0 $o-mail-chatter-gap;
                border-radius: 2px 0 0 2px;
                border-right-width: 0;

                .o_mail_emoji_container {
                    text-align: right;
                    border-right-width: 1px;
                }
            }
            .o_composer_input {
                display: flex;
                flex-flow: row wrap;

                textarea {
                    padding-top: 0px !important;
                }
            }
            .o_composer_text_field {
                flex: 1 1 50%;
                margin: 0;
                padding: 0;
            }
            .o_chatter_composer_tools {
                flex: 0 1 auto;
            }
            .o_composer_attachments_list {
                flex: 1 0 100%;
            }

            .o_composer_thread_typing {
                font-size: 0.9em;
                color: gray('600');
            }

            .o_chatter_composer_tools {
                border: none;
                border-left: 1px solid gray('300');
                padding-left: $o-mail-chatter-gap*0.5;
                transform: translateY(-$o-mail-chatter-gap*0.5);
            }

            .o_composer_button_send {
                border-radius: 0 3px 3px 0;
                // Make the button appear as the same size as the subject input
                padding: 10px $input-btn-padding-x;
                border: 1px solid darken($o-brand-primary, 5%);
                border-left-width: 0;
            }
        }
    }

    // Mini-composer enabled
    &.o_chat_mini_composer {
        .o_composer_container {
            border-top: 1px solid gray('300');
            width: 100%;
        }
        .o_composer {
            .o_mail_emoji_container {
                @include o-position-absolute(auto, 0, 100%, 0);
                border-bottom-width: 1px;
            }
        }
        .o_composer_input {
            display: flex;
            flex-flow: row nowrap;

            textarea.o_composer_text_field {
                flex: 1 1 auto;
            }

            .o_chatter_composer_tools {
                flex: 0 0 auto;
            }
            @include media-breakpoint-down(sm) {
                .o_composer_button_send {
                    display: inline-block;
                }
            }
        }
        .o_composer_send .o_composer_button_send, .o_chatter_avatar {
            display: none !important;
        }
    }

    .o_file_drop_zone_container {
        display: flex;
        position: absolute;
        left: 0px;
        bottom: 0px;
        height: 100%;
        width: 100%;
        color: $o-brand-primary;
        background: rgba(255, 255, 255, 0.9);
        border: 2px dashed $o-brand-primary;
        z-index: 1;
        align-items: center;
        justify-content: center;
    }
}

.o_composer_attachments_list:not(:empty) {
    margin-top: $o-mail-chatter-gap;
    text-align: justify;
}

// Emoji
.o_mail_emoji {
    display: inline-block;
    padding: 0;
    font-size: 1.3rem;
    font-family: emojifont;
}
.o_mail_preview .o_mail_emoji {
    font-size: 100%;
}

// Attachment Icons (common for chat thread and chat composer)
.o_attachments_list, .o_attachments_previews {
    margin: 0 (-$o-attachment-margin) 0;
    display: flex;
    flex-flow: row wrap;
}

.o_attachments_previews {
    > .o_attachment {
        width: 50%;

        @include media-breakpoint-up(md) {
            width: percentage(1/3);
        }
        @include media-breakpoint-up(lg) {
            width: percentage(1/4);
        }
        @include media-breakpoint-up(xl) {
            width: percentage(1/6);
        }

        .o_attachment_wrap {
            padding: 0;
            border-radius: 2px;
            border: 1px solid gray('400');
        }

        .o_image_box {
            overflow: hidden;
            padding-top: 75%;

            .o_attachment_image {
                @include o-position-absolute(0, 0, 0, 0);
                background-size: cover;
                background-position: center;
                transform: scale(1.05);
                transition: all 0.3s ease 0s;
            }

            &:hover .o_attachment_image {
                transform: scale(1);
            }
        }

        .o_image_overlay {
            @include o-position-absolute($top: 0, $left: 0, $right:0, $bottom:0);
            @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
            background-image: linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9));
            transition: all 0.3s ease 0s;
            padding: 10px;

            .o_attachment_title {
                @include o-position-absolute($bottom: 7px);
                width: 80%;
                @include o-text-overflow(inline-block);
                font-size: $font-size-sm;
            }

            .o_attachment_delete_cross {
                color: white;
            }

            .o_attachment_download {
                @include o-position-absolute($right: 7px, $bottom:7px);
            }
        }
    }
}


@mixin o-viewer-black-btn {
    background-color: rgba(black, 0.4);
    color: rgba(theme-color('light'), 0.7);

    &:hover {
        background-color: rgba(black, 0.6);
        color: white;
    }

    &.disabled {
        color: gray('600');
        background: none;
    }
}
.o_modal_fullscreen {
    z-index: $o-mail-thread-window-zindex + 1;

    .o_viewer_content {
        position: relative;
        width: 100%;
        height: 100%;

        .o_viewer-header {
            @include o-position-absolute(0, 0, $left: 0);
            height: 45px;
            padding: $grid-gutter-width*0.5;
            background-color: rgba(black, 0.8);
            z-index: 1;
            color: #FFFFFF;

            a {
                @include o-hover-text-color(rgba(theme-color('light'), 0.6), white);
            }

            .o_close_btn {
                @include o-position-absolute(-1px, $grid-gutter-width*0.5);
                font-size: $h1-font-size;
                font-weight: 300;
            }

            .o_image_caption {
                bottom: 20%;
                position: absolute;
            }
        }

        .o_loading_img {
            @include o-position-absolute($top: 45%, $right: 0, $left: 0);
        }

        .o_viewer_img_wrapper {
            cursor: pointer;
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(black, 0.7);

            .o_viewer_zoomer {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 45px 0;

                img {
                    image-orientation: from-image; // Only supported in Firefox
                }

                img, video {
                    cursor :auto;
                    max-width: 100%;
                    max-height: 100%;
                    transition: 0.2s cubic-bezier(0, 0, 0.49, 1.6) 0s, opacity 0.15s;
                    box-shadow: 0 0 40px black;
                }

                .o_viewer_pdf {
                    width: 80%;
                    height: 100%;
                    border: 0px;
                    box-shadow: 1px 1px 20px 1px #000;
                }

                .o_viewer_text {
                    width: 80%;
                    height: 100%;
                    border: 0px;
                    box-shadow: 1px 1px 20px 1px #000;
                    background-color: white;
                }

                .o_viewer_video {
                    height: 80%;
                }
            }
        }

        .o_viewer_toolbar {
            @include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5);
            transform: translate(-50%, -50%);
            overflow: hidden;
            border-radius: 4px;
            background-color: rgba(black, 0.4);

            .o_viewer_toolbar_btn {
                @include o-viewer-black-btn;
                padding-left: 8px;
                padding-right: 8px;
            }
        }
    }

    .arrow {
        @include o-position-absolute(50%, $grid-gutter-width*0.5);
        border-radius: 100%;
        padding: 12px 16px 11px 18px;
        @include o-viewer-black-btn;
    }

    .arrow-left {
        left: $grid-gutter-width*0.5;
        right: auto;
        padding: 12px 18px 11px 16px;
    }
}