/* ==========================================================================
   ELX UI · Sheet
   ========================================================================== */

.sheet-backdrop{

    position:fixed;

    inset:0;

    background:rgb(0 0 0 / .35);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:opacity var(--elx-transition);

    z-index:calc(var(--elx-z-sheet) - 1);

}

.sheet-backdrop.active{

    opacity:1;

    visibility:visible;

}

.sheet{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    width:100%;

    max-height:92vh;

    display:flex;

    flex-direction:column;

    background:var(--elx-surface);

    border-radius:

        var(--elx-radius-xl)

        var(--elx-radius-xl)

        0

        0;

    transform:translateY(100%);

    transition:transform var(--elx-transition);

    box-shadow:var(--elx-shadow-lg);

    overflow:hidden;

    z-index:var(--elx-z-sheet);

}

.sheet.expanded{

    transform:translateY(0);

}

.sheet.collapsed{

    transform:translateY(calc(100% - 72px));

}

.sheet-handle{

    width:48px;

    height:5px;

    border-radius:999px;

    background:#d1d5db;

    margin:

        12px

        auto

        16px;

    flex-shrink:0;

}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.elx-sheet-header{

    display:flex;

    align-items:center;

    gap:16px;

    padding:

        var(--elx-space-lg);

    border-bottom:

        1px solid

        var(--elx-border);

    flex-shrink:0;

}

.elx-sheet-header-left{

    flex:1;

}

.elx-sheet-title{

    font-size:30px;

    font-weight:700;

    line-height:1.1;

}

.elx-sheet-subtitle{

    margin-top:6px;

    color:

        var(--elx-text-light);

    font-size:15px;

}

.elx-sheet-actions{

    display:flex;

    gap:10px;

}

.sheet-content{

    flex:1;

    overflow:auto;

    padding:0 var(--elx-space-lg) var(--elx-space-lg);

    -webkit-overflow-scrolling:touch;

}

body.sheet-open{

    overflow:hidden;

}

/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media (min-width:1024px){

    .sheet{

        top:0;

        right:0;

        left:auto;

        bottom:0;

        width:560px;

        max-width:100%;

        max-height:100vh;

        height:100vh;

        border-radius:0;

        transform:translateX(100%);

    }

    .sheet.expanded{

        transform:translateX(0);

    }

    .sheet.collapsed{

        transform:translateX(100%);

    }

    .sheet-handle{

        display:none;

    }

}