/*
 * ui-dialog.css
 *
 * Portable dialog primitive.
 *
 * Applications should customize appearance by overriding the
 * --ui-dialog-* variables rather than modifying component rules.
 */

:root {
    --ui-dialog-font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --ui-dialog-backdrop:
        rgb(0 0 0 / 0.68);

    --ui-dialog-surface:
        #ffffff;

    --ui-dialog-text:
        #172033;

    --ui-dialog-muted:
        #667085;

    --ui-dialog-border:
        #d0d5dd;

    --ui-dialog-primary:
        #2563eb;

    --ui-dialog-primary-hover:
        #1d4ed8;

    --ui-dialog-danger:
        #b42318;

    --ui-dialog-danger-hover:
        #912018;

    --ui-dialog-neutral:
        #ffffff;

    --ui-dialog-neutral-hover:
        #f2f4f7;

    --ui-dialog-focus:
        #84adff;

    --ui-dialog-radius:
        14px;

    --ui-dialog-shadow:
        0 28px 80px rgb(0 0 0 / 0.36);

    --ui-dialog-max-width:
        560px;

    --ui-dialog-spacing:
        20px;

    --ui-dialog-z-index:
        10000;
}


.ui-dialog-open {
    overflow:
        hidden;
}


.ui-dialog-backdrop {
    position:
        fixed;

    inset:
        0;

    z-index:
        var(--ui-dialog-z-index);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    overflow:
        auto;

    background:
        var(--ui-dialog-backdrop);

    opacity:
        0;

    transition:
        opacity 150ms ease;
}


.ui-dialog-backdrop--open {
    opacity:
        1;
}


.ui-dialog-shell {
    width:
        min(100%,
            var(--ui-dialog-max-width));

    max-height:
        calc(100vh - 48px);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    color:
        var(--ui-dialog-text);

    background:
        var(--ui-dialog-surface);

    border:
        1px solid var(--ui-dialog-border);

    border-radius:
        var(--ui-dialog-radius);

    box-shadow:
        var(--ui-dialog-shadow);

    font-family:
        var(--ui-dialog-font-family);

    transform:
        translateY(8px) scale(0.985);

    transition:
        transform 150ms ease;
}


.ui-dialog-backdrop--open .ui-dialog-shell {
    transform:
        translateY(0) scale(1);
}


.ui-dialog-shell--lightbox {
    width:
        min(96vw,
            1440px);

    height:
        min(92vh,
            1000px);

    max-height:
        92vh;
}


.ui-dialog-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    min-height:
        64px;

    padding:
        16px var(--ui-dialog-spacing);

    border-bottom:
        1px solid var(--ui-dialog-border);
}


.ui-dialog-title {
    min-width:
        0;

    margin:
        0;

    font-size:
        1.125rem;

    font-weight:
        650;

    line-height:
        1.3;
}


.ui-dialog-close {
    width:
        36px;

    height:
        36px;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    color:
        var(--ui-dialog-muted);

    background:
        transparent;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font:
        inherit;

    font-size:
        1.65rem;

    line-height:
        1;

    cursor:
        pointer;
}


.ui-dialog-close:hover {
    color:
        var(--ui-dialog-text);

    background:
        var(--ui-dialog-neutral-hover);
}


.ui-dialog-close:focus-visible,
.ui-dialog-button:focus-visible {
    outline:
        3px solid var(--ui-dialog-focus);

    outline-offset:
        2px;
}


.ui-dialog-body {
    min-height:
        0;

    padding:
        var(--ui-dialog-spacing);

    overflow:
        auto;
}


.ui-dialog-shell--lightbox .ui-dialog-body {
    flex:
        1;

    display:
        flex;

    padding:
        0;
}


.ui-dialog-description {
    margin:
        0;

    color:
        var(--ui-dialog-muted);

    line-height:
        1.55;

    white-space:
        pre-wrap;
}


.ui-dialog-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        10px;

    padding:
        14px var(--ui-dialog-spacing);

    border-top:
        1px solid var(--ui-dialog-border);
}


.ui-dialog-button {
    min-height:
        40px;

    padding:
        8px 16px;

    color:
        var(--ui-dialog-text);

    background:
        var(--ui-dialog-neutral);

    border:
        1px solid var(--ui-dialog-border);

    border-radius:
        9px;

    font:
        inherit;

    font-weight:
        600;

    cursor:
        pointer;
}


.ui-dialog-button:hover:not( :disabled) {
    background:
        var(--ui-dialog-neutral-hover);
}


.ui-dialog-button:disabled {
    opacity:
        0.55;

    cursor:
        not-allowed;
}


.ui-dialog-button--primary {
    color:
        #ffffff;

    background:
        var(--ui-dialog-primary);

    border-color:
        var(--ui-dialog-primary);
}


.ui-dialog-button--primary:hover:not( :disabled) {
    background:
        var(--ui-dialog-primary-hover);

    border-color:
        var(--ui-dialog-primary-hover);
}


.ui-dialog-button--danger {
    color:
        #ffffff;

    background:
        var(--ui-dialog-danger);

    border-color:
        var(--ui-dialog-danger);
}


.ui-dialog-button--danger:hover:not( :disabled) {
    background:
        var(--ui-dialog-danger-hover);

    border-color:
        var(--ui-dialog-danger-hover);
}


@media (max-width: 640px) {
    .ui-dialog-backdrop {
        align-items:
            flex-end;

        padding:
            12px;
    }


    .ui-dialog-shell {
        width:
            100%;

        max-height:
            calc(100vh - 24px);

        border-radius:
            14px;
    }


    .ui-dialog-shell--lightbox {
        height:
            calc(100vh - 24px);

        max-height:
            calc(100vh - 24px);
    }


    .ui-dialog-actions {
        align-items:
            stretch;

        flex-direction:
            column-reverse;
    }


    .ui-dialog-button {
        width:
            100%;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ui-dialog-backdrop,
    .ui-dialog-shell {
        transition:
            none;
    }
}