/* ==========================================================================
   ELX Overlay
   ========================================================================== */

.elx-overlay{

    position:fixed;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:center;

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

    opacity:0;

    pointer-events:none;

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

}

.elx-overlay[hidden]{

    display:none;

}

.elx-overlay-backdrop{

    position:absolute;

    inset:0;

    background:var(--elx-overlay);

    backdrop-filter:

        blur(
            var(--elx-overlay-blur)
        );

}

.elx-overlay-container{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    max-width:100%;

    background:var(--elx-surface);

    border-radius:

        var(--elx-radius-xl)

        var(--elx-radius-xl)

        0

        0;

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

    overflow:clip;

    z-index:1;

    transition:

        transform var(--elx-transition),

        opacity var(--elx-transition);

}

.elx-overlay-header{

    padding:var(--elx-space-xl);

    border-bottom:

        var(--elx-border-width)

        var(--elx-border-style)

        var(--elx-border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--elx-space-lg);

}

.elx-overlay-title{

    margin:0;

}

.elx-overlay-body{

    padding:var(--elx-space-xl);

}

.elx-overlay-footer{

    display:flex;

    align-items:center;

    gap:var(--elx-space-md);

    padding:var(--elx-space-xl);

    border-top:1px solid var(--elx-border);

}

.elx-overlay[data-state="created"]{

    opacity:0;

    pointer-events:none;

}

.elx-overlay[data-state="opening"],

.elx-overlay[data-state="open"]{

    opacity:1;

    pointer-events:auto;

}

.elx-overlay[data-state="closing"]{

    opacity:0;

    pointer-events:none;

}

.elx-overlay[data-state="opening"] .elx-overlay-container,

.elx-overlay[data-state="open"] .elx-overlay-container{

    transform:translateY(0);

}

.elx-overlay[data-state="closing"] .elx-overlay-container{

    transform:translateY(40px);

}

/* ==========================================================================
   Position
   ========================================================================== */

.elx-overlay[data-position="bottom"]{

    align-items:flex-end;

    justify-content:center;

}

.elx-overlay[data-position="top"]{

    align-items:flex-start;

    justify-content:center;

}

.elx-overlay[data-position="left"]{

    align-items:stretch;

    justify-content:flex-start;

}

.elx-overlay[data-position="right"]{

    align-items:stretch;

    justify-content:flex-end;

}

.elx-overlay[data-position="center"]{

    align-items:center;

    justify-content:center;

}

.elx-overlay[data-position="bottom"]
.elx-overlay-container{

    width:100%;

    border-radius:
        var(--elx-radius-xl)
        var(--elx-radius-xl)
        0
        0;

}

.elx-overlay[data-position="top"]
.elx-overlay-container{

    width:100%;

    border-radius:
        0
        0
        var(--elx-radius-xl)
        var(--elx-radius-xl);

}

.elx-overlay[data-position="center"]
.elx-overlay-container{

    border-radius:
        var(--elx-radius-xl);

}

.elx-overlay[data-position="left"]
.elx-overlay-container,

.elx-overlay[data-position="right"]
.elx-overlay-container{

    width:420px;

    height:100%;

    border-radius:0;

}

/* ==========================================================================
   Sheet
   ========================================================================== */

.elx-overlay-container-sheet{

    max-height:90dvh;

}

/* ==========================================================================
   Sheet Handle
   ========================================================================== */

.elx-overlay-handle{

    display:flex;

    justify-content:center;

    padding:

        var(--elx-space-md)

        0;

}

.elx-overlay-handle-bar{

    width:56px;

    height:5px;

    border-radius:

        var(--elx-radius-full);

    background:

        var(--elx-border);

}

.elx-overlay-header-left{

    flex:1;

}

.elx-overlay-header-right{

    display:flex;

    align-items:center;

    gap:var(--elx-space-sm);

}

.elx-overlay-identity{

    display:flex;

    align-items:center;

    gap:var(--elx-space-md);

}

.elx-overlay-heading{

    display:flex;

    flex-direction:column;

    gap:2px;

}

.elx-overlay-subtitle{

    margin:0;

    color:var(--elx-text-muted);

    font-size:var(--elx-font-sm);

}

/* ==========================================================================
   Size
   ========================================================================== */

.elx-overlay[data-size="sm"]
.elx-overlay-container{

    max-width:420px;

}

.elx-overlay[data-size="md"]
.elx-overlay-container{

    max-width:640px;

}

.elx-overlay[data-size="lg"]
.elx-overlay-container{

    max-width:820px;

}

.elx-overlay[data-size="xl"]
.elx-overlay-container{

    max-width:1080px;

}

/* ==========================================================================
   Animation
   ========================================================================== */

/* Slide Up */

.elx-overlay[data-animation="slide-up"]
.elx-overlay-container{

    transform:translateY(40px);

}

.elx-overlay[data-animation="slide-up"][data-state="opening"]
.elx-overlay-container,

.elx-overlay[data-animation="slide-up"][data-state="open"]
.elx-overlay-container{

    transform:translateY(0);

}

/* Slide Down */

.elx-overlay[data-animation="slide-down"]
.elx-overlay-container{

    transform:translateY(-40px);

}

.elx-overlay[data-animation="slide-down"][data-state="opening"]
.elx-overlay-container,

.elx-overlay[data-animation="slide-down"][data-state="open"]
.elx-overlay-container{

    transform:translateY(0);

}

/* Slide Left */

.elx-overlay[data-animation="slide-left"]
.elx-overlay-container{

    transform:translateX(40px);

}

.elx-overlay[data-animation="slide-left"][data-state="opening"]
.elx-overlay-container,

.elx-overlay[data-animation="slide-left"][data-state="open"]
.elx-overlay-container{

    transform:translateX(0);

}

/* Slide Right */

.elx-overlay[data-animation="slide-right"]
.elx-overlay-container{

    transform:translateX(-40px);

}

.elx-overlay[data-animation="slide-right"][data-state="opening"]
.elx-overlay-container,

.elx-overlay[data-animation="slide-right"][data-state="open"]
.elx-overlay-container{

    transform:translateX(0);

}

/* Fade */

.elx-overlay[data-animation="fade"]
.elx-overlay-container{

    opacity:0;

}

.elx-overlay[data-animation="fade"][data-state="opening"]
.elx-overlay-container,

.elx-overlay[data-animation="fade"][data-state="open"]
.elx-overlay-container{

    opacity:1;

}

/* Scale */

.elx-overlay[data-animation="scale"]
.elx-overlay-container{

    opacity:0;

    transform:scale(.94);

}

.elx-overlay[data-animation="scale"][data-state="opening"]
.elx-overlay-container,

.elx-overlay[data-animation="scale"][data-state="open"]
.elx-overlay-container{

    opacity:1;

    transform:scale(1);

}

/* ==========================================================================
   Toast
   ========================================================================== */

.elx-toast{

    display:flex;

    align-items:center;

    gap:var(--elx-space-lg);

}

.elx-toast-content{

    display:flex;

    flex-direction:column;

    gap:4px;

    flex:1;

}

.elx-toast .elx-overlay-title{

    margin:0;

}

.elx-toast .elx-overlay-subtitle{

    margin:0;

}