: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;
}