/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 아이모듈 모달 스타일시트를 정의한다.
 * 
 * @file /app/resources/styles/modal.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 10. 14.
 */
body {
    &[data-frame='site'],
    &[data-frame='context'],
    &[data-frame='popup'] {
        > dialog[data-role='modal'] {
            position: fixed;
            inset: 0;
            z-index: 20000;
            width: 90%;
            max-width: 400px;
            height: fit-content;
            max-height: calc(100% - var(--im-component-gap-extra-large) * 2);
            margin: auto;
            padding: 0;
            border: 0;
            box-sizing: border-box;
            color: inherit;
            background: var(--im-bg-primary);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

            &[open] {
                display: flex;
                flex-direction: column;
            }

            /**
             * 백드롭
             */
            &::before {
                content: ' ';
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: color-mix(in srgb, var(--im-bg-tertiary) 70%, transparent);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                z-index: -1;
            }

            /**
             * 백드롭이 모달창 배경을 덮으므로, 모달창 배경을 백드롭 위에 다시 그린다.
             */
            &::after {
                content: ' ';
                position: absolute;
                inset: 0;
                background: inherit;
                border-radius: inherit;
                z-index: -1;
            }

            > div[data-role='title'] {
                width: 100%;
                height: var(--im-component-height-large);
                padding-inline: var(--im-component-gap-extra-large);
                padding-top: calc(var(--im-component-gap-extra-large) + var(--im-component-gap-small));
                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;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;

                > button[data-role='button'][data-action='close'] {
                    background: none;
                    border: none;
                    font-size: var(--modal-title-font-size);
                    font-weight: bold;
                    color: var(--modal-title-color);
                }
            }

            > div[data-role='content'] {
                padding: var(--im-component-gap-extra-large);
                font-size: var(--im-font-size-default);
                line-height: var(--im-component-line-height);
                color: var(--im-text-primary);
                box-sizing: border-box;
                word-break: break-all;
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
            }

            > div[data-role='buttons'] {
                width: 100%;
                flex-shrink: 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-bg-tertiary);

                        &::before {
                            background: var(--im-bg-quaternary);
                        }

                        &:hover {
                            background: var(--im-border-secondary);
                        }
                    }
                }
            }
        }

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

            overflow: hidden;
        }
    }
}