/* =====================================================
   LIFEMATE UNIVERSAL FILES
===================================================== */


/* =====================================================
   FILE FORMATS ON HOME CARD
===================================================== */

.file-formats {

    margin-top:
        11px;

    width:
        fit-content;

    padding:
        5px 8px;

    border:
        1px solid
        rgba(45, 210, 155, .13);

    border-radius:
        7px;

    background:
        rgba(31, 188, 137, .055);

    color:
        #6ecbab;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .35px;

}


/* =====================================================
   ATTACHED DOCUMENT
===================================================== */

.composer.document-attached {

    background:

        linear-gradient(
            var(--panel),
            var(--panel)
        )
        padding-box,

        linear-gradient(
            100deg,
            #1cae82,
            #4f79ff,
            #8a57ff
        )
        border-box;

    box-shadow:

        0 15px 55px
        rgba(0,0,0,.43),

        0 0 35px
        rgba(36, 185, 144, .07);

}


/* =====================================================
   DOCUMENT FILE PREVIEW
===================================================== */

.composer.document-attached +
* {

    position:
        relative;

}


.file-preview.show
.file-preview-icon {

    background:

        linear-gradient(
            135deg,
            #0aa878,
            #2ec69c
        );

}


/* =====================================================
   READY STATUS
===================================================== */

.file-preview-status.ready {

    color:
        #55d7aa;

}


/* =====================================================
   UPLOADING
===================================================== */

.file-preview-status.uploading {

    color:
        #a9a0ff;

}


/* =====================================================
   ERROR
===================================================== */

.file-preview-status.error {

    color:
        #ff758d;

}


/* =====================================================
   DOCUMENT DROP
===================================================== */

.composer.document-drag-active::after {

    content:
        "Drop document here";

    position:
        absolute;

    inset:
        5px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px dashed
        rgba(79, 215, 169, .35);

    border-radius:
        18px;

    background:
        rgba(5, 10, 19, .98);

    color:
        #92e3c8;

    font-size:
        12px;

    font-weight:
        650;

    z-index:
        80;

}


/* =====================================================
   FILE TYPE CHIP
===================================================== */

.lifemate-file-type-chip {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        38px;

    height:
        21px;

    padding:
        0 7px;

    border:
        1px solid
        rgba(72, 211, 162, .16);

    border-radius:
        6px;

    background:
        rgba(72, 211, 162, .06);

    color:
        #77d7b6;

    font-size:
        7px;

    font-weight:
        800;

}


/* =====================================================
   FILES MODE NAV
===================================================== */

.nav-item[data-mode="files"].active
.nav-icon {

    background:

        linear-gradient(
            135deg,
            rgba(27, 172, 129, .30),
            rgba(65, 119, 255, .24)
        );

    color:
        white;

}


/* =====================================================
   MOBILE
===================================================== */

@media (
    max-width: 520px
) {

    .file-formats {

        display:
            none;

    }

}