/* © 2026 iPrime | CssUiCompModal.css */

@layer components {

    .Modal-Overlay {
        position: fixed;
        inset: 0;
        z-index: var(--prime-z-index-modal);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--prime-padding-16);
        background: var(--prime-modal-overlay-background);
        backdrop-filter: blur(var(--prime-blur-4));
        animation: modal-overlay-in var(--prime-duration-200) var(--prime-ease-smooth);
    }
    
    @keyframes modal-overlay-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .Modal {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--prime-space-16);
        inline-size: min(var(--prime-max-width-450), 100%);
        max-block-size: calc(100vh - var(--prime-padding-32));
        padding: var(--prime-padding-24);
        background: var(--prime-modal-background);
        border: var(--prime-border-width-1) solid var(--prime-modal-border);
        border-radius: var(--prime-border-radius-16);
        box-shadow: var(--prime-modal-shadow);
        overflow-y: auto;
        animation: modal-in var(--prime-duration-200) var(--prime-ease-smooth-out);
    }
    
    @keyframes modal-in {
        from { opacity: 0; transform: scale(0.95) translateY(8px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
    
    .Modal-Header {
        display: flex;
        align-items: center;
        gap: var(--prime-space-12);
    }
    
    .Modal-Icon {
        flex-shrink: 0;
        font-size: var(--prime-font-size-24);
        line-height: 1;
    }
    
    .Modal-Title {
        flex: 1;
        margin: 0;
        font-family: var(--prime-font-heading);
        font-size: var(--prime-font-size-18);
        font-weight: var(--prime-font-weight-600);
        line-height: var(--prime-line-height-120);
        color: var(--prime-modal-title-text);
    }
    
    .Modal-Body {
        flex: 1;
    }
    
    .Modal-Message {
        margin: 0;
        font-size: var(--prime-font-size-14);
        line-height: var(--prime-line-height-160);
        color: var(--prime-modal-message-text);
    }
    
    .Modal-Footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--prime-space-12);
        padding-block-start: var(--prime-padding-8);
    }
    
    /* === BUTTONS === */
    .Modal-Button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--prime-space-8);
        block-size: var(--prime-height-40);
        padding-inline: var(--prime-padding-20);
        font-family: var(--prime-font-primary);
        font-size: var(--prime-font-size-14);
        font-weight: var(--prime-font-weight-500);
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        border: var(--prime-border-width-1) solid transparent;
        border-radius: var(--prime-border-radius-8);
        cursor: pointer;
        transition: 
            background-color var(--prime-duration-150) var(--prime-ease-smooth),
            border-color var(--prime-duration-150) var(--prime-ease-smooth),
            transform var(--prime-duration-150) var(--prime-ease-smooth);
        
        &:focus-visible {
            outline: var(--prime-outline-width-2) solid var(--prime-modal-button-outline-focus);
            outline-offset: var(--prime-outline-offset-2);
        }
        
        &:active {
            transform: scale(0.98);
        }
    }
    
    .Modal-Button--Default {
        background: var(--prime-modal-button-default-background);
        color: var(--prime-modal-button-default-text);
        border-color: var(--prime-modal-button-default-border);
        
        &:hover {
            background: var(--prime-modal-button-default-background-hover);
            border-color: var(--prime-modal-button-default-border-hover);
        }
    }
    
    .Modal-Button--Primary {
        background: var(--prime-modal-button-primary-background);
        color: var(--prime-modal-button-primary-text);
        
        &:hover {
            background: var(--prime-modal-button-primary-background-hover);
        }
    }
    
    .Modal-Button--Danger {
        background: var(--prime-modal-button-danger-background);
        color: var(--prime-modal-button-danger-text);
        
        &:hover {
            filter: brightness(1.1);
        }
    }
    
    .Modal-Button--Warning {
        background: var(--prime-modal-button-warning-background);
        color: var(--prime-modal-button-warning-text);
        
        &:hover {
            filter: brightness(1.05);
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        .Modal-Overlay,
        .Modal {
            animation: none;
        }
    }

}