@import '../../../../sass/variables';


:host .c21-content ::ng-deep > chat-image  {

    div { 
        margin: 2px auto !important;

        // img {
        //     height: 98%;
        // }
    }  
}

#c21-preview{
    --margin-top: 200px;
    --margin-left: 50px;
    --margin-right: 50px;
    --header-height: 40px;

    --modal-height: 240px;
    --modal-width: 80%;

    --content-height: 160px;

    background-color: rgba(0,0,0,0.4);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 25;

    .modal-preview-image {
        
        width: auto;
        height: auto;
        min-height: var( --modal-height);
        min-width: 100px;
        max-width: 80%;
        border-radius: 3px;
        font-size: 1.2em;
        line-height: normal;
        overflow: hidden;
        border: 1px solid #d7d7d7;  
        background-color: #ffffff; 
        z-index: 25;
        margin: auto;
        margin-top: var(--margin-top);
        
    }
    
    .c21-header{
        height: calc(2px + var(--header-height));
        position: fixed;
        top: var(--margin-top);
        // right: var(--margin-right);
        // left: var(--margin-left);
        .c21-header-container{
            height: var(--header-height);
            width: var(--modal-width);
            margin: inherit;
            -webkit-box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 0 3px 5px -3pxrgba(0, 0, 0, 0.4);
            box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.4);
            .c21-header-content {
                .c21-title {
                    position: absolute;
                    // left: 50px;
                    // right: 100px;
                    display: inline-block;
                    width: auto;
                    height: 40px;
                    padding: 0px;
                    margin: 0px 10px;
                    font-size: 1.0em;
                    font-weight: 500;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
        
                    .titleText {
                        position: relative;
                        line-height: 40px;
                        text-align: left;
                        font-size: 1em;
                    }
                }

                .c21-header-button{
                    width: 30px;
                    height: 30px;
                }
            }
        }

        
    }


    .c21-content{
        position: fixed;
        top: calc( var(--margin-top) + var(--header-height));
        width: var(--modal-width);
        height: var(--content-height);

        // img {
        //     border-radius: 8px;
        //     //padding: 3px;
        //     margin-bottom: 0px;
        //     max-width: calc(100% - 6px);
        //     width: auto;
        //     height: auto;
        //     object-fit: cover;
            
        // }
        #c21-contentScroll-preview{
            position: absolute;
            left: 0px;
            right: 10px;
            padding: 10px;
            // display: none;
            opacity: 0;
            -webkit-transition: opacity 0.5s; /* Safari */
            transition: opacity 0.5s;
            transition-timing-function: ease-in;
        }

        #scroll-me-preview {
            height: 100%;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }
        #scroll-me-preview:hover {
            &::-webkit-scrollbar-thumb {
                background: #777777; 
            }
        }


        #scroll-me-preview {
            scroll-behavior: smooth;
        }
        #scroll-me-preview.withoutAnimation {
            scroll-behavior: unset;
        }

        #img-preview-file-extension {
            text-align: center;
            position: relative;
            text-transform: uppercase;
            color: #fff;
            top: -25px;
            font-weight: 500;
        }
    }

    #c21-footer{
        position: fixed;
        top: calc( var(--margin-top) + var(--header-height) + var(--content-height));
        width: var(--modal-width);
        box-shadow: 0 -1px 0px 0px $trasp-light-gray;
        background: white;
        
        textarea,
        textarea:visited,
        textarea:focus,
        textarea:hover,
        textarea:active{
            all: unset;
        }

        #chat21-main-message-context-preview {
            overflow: hidden;
            word-wrap: break-word;
            resize: horizontal;
            overflow-y: auto;
            box-sizing: border-box;
            color: $black;
            min-width: 100%;
            outline: 0;
            resize: none;
            font-size: 1.4em;
            line-height: 1.4em;
            font-weight: 300;
            max-height: 110px;
            min-height: auto;
            height: 20px;
            padding: 0px 30px 0px 10px;
            margin: 10px 0px 10px;
            border: none;
        }

        .chat21-textarea-button {
            position: absolute;
            display: block;
            bottom: 22px;
            width: 20px;
            height: 20px;
            opacity: 0.3;
            cursor: initial;
            &.active {
                opacity: 1;
                cursor: pointer;
            }
        }

        #chat21-button-send {
            right: 8px;
            bottom: 10px;
        }

        .visible-text-area {
            pointer-events: auto;
        }
        
        .chat21-textarea-button {
            pointer-events: auto;
        }
        .chat21-textarea-button {
            fill: $blue;
            pointer-events: auto;
        }

        textarea,
        textarea:visited,
        textarea:focus,
        textarea:hover,
        textarea:active{
            all: unset;
        }
    }
    
}