@layer base, layout, utilities, override;

@import "../vendor/bootstrap/dist/css/bootstrap.min-z0zQt-h.css" layer(base);
@import "popover-17zO7TP.css" layer(base);

@layer layout {
    :root {
        --dialog-backdrop: linear-gradient(to bottom, #919191, #919191);
        --dialog-bg-color: #f4f4f4;
    }

    body {
        background-color: #ffffff;
    }

    .icon {
        width: 1rem;
        height: 1rem;
        color: currentColor;

        &.spin {
            animation: rotate 1s linear infinite;
        }
    }

    .make__scroll {
        --height: 100vh;
        overflow-y: auto;
        max-height: var(--height);
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    dialog {
        opacity: 0;
        margin: 0;
        display: none;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: -100;

        &[open] {
            border: 1px solid var(--dialog-bg-color);
            border-radius: 0.375rem;
            padding: 0;
            opacity: 1;
            transition: opacity .3s ease-in;

            display: flex;
            flex-direction: column;
            max-height: 90vh;
            max-width: 90vw;
            min-width: 60vw;

            header, main, footer {
                padding: 1rem;
            }

            header {
                background: var(--dialog-bg-color);

                .title {
                    font-size: 1.25rem;
                    display: flex;
                    justify-content: space-between;

                    button {
                        text-align: end;
                        border: none;
                        background: transparent;
                        max-width: 32px;
                        opacity: .5;
                        outline: none;
                        cursor: pointer;

                        &:hover {
                            opacity: .75;
                        }
                    }
                }
            }

            main {
                flex: 1;
                overflow-y: auto;
            }

            footer:not(:empty) {
                text-align: right;
                border-top: 1px solid var(--dialog-bg-color);
            }
        }

        &::backdrop {
            background-blend-mode: multiply;
            background-image: var(--dialog-backdrop);
            opacity: .8;
        }
    }

    html {
        &:has(dialog[open]) {
            overflow: hidden !important;
        }
    }

    .vh-70 {
        max-height: 70vh;
    }
}