/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 아이모듈 모달 스타일시트를 정의한다.
 * 
 * @file /app/resources/styles/modal.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 2. 13.
 */
body {
    &[data-frame='site'],
    &[data-frame='context'] {
        > div[data-role='modals'] {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 20000;
            top: 0;
            left: 0;
            overflow-y: auto;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            &::before {
                content: ' ';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--im-color-background-400);
                opacity: 0.7;
                z-index: -1;
            }

            > section {
                min-width: 100%;
                min-height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                > div[data-role='modal'] {
                    width: 90%;
                    max-width: 400px;
                    box-sizing: border-box;
                    background: var(--im-color-background-500);
                    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

                    > div[data-role='title'] {
                        width: 100%;
                        height: var(--im-component-height-large);
                        padding-inline: var(--im-component-gap-large);
                        padding-top: calc(var(--im-component-gap-large) + var(--im-component-gap-default));
                        padding-bottom: 0;
                        font-size: var(--im-font-size-h4);
                        color: var(--modal-title-color);
                        font-size: var(--modal-title-font-size);
                        font-weight: bold;
                        position: sticky;
                        top: 0;
                    }

                    > div[data-role='content'] {
                        padding: var(--im-component-gap-large);
                        font-size: var(--im-font-size-default);
                        line-height: var(--im-component-line-height);
                        color: var(--im-color-foreground-500);
                        box-sizing: border-box;
                        word-break: break-all;
                    }

                    > div[data-role='buttons'] {
                        width: 100%;
                        position: sticky;
                        bottom: 0;
                        display: flex;
                        padding: 0;
                        gap: 0;

                        > button {
                            flex-grow: 1;
                            flex-shrink: 1;
                            flex-basis: 0;
                            border-radius: 0;

                            &:not(.confirm)&:not(.begining)&:not(.danger)&:not(.action) {
                                border: 0;
                                padding: calc((var(--im-component-height-default) - 1lh) / 2);
                                border-color: var(--im-color-background-430);

                                &::before {
                                    background: var(--im-color-background-300);
                                }

                                &:hover {
                                    background: var(--im-color-background-200);
                                }
                            }
                        }
                    }
                }
            }
        }

        &:has(div[data-role='modals']) {
            > div[data-role='scrollbar'] {
                display: none;
            }

            overflow: hidden;
        }
    }
}