:root {
    --header-bg: #f4f4f4;
    --backdrop: #919191;
    --input-disabled: #dddddd;
}

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

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

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

        &.dialog--small {
           @media screen and (min-width: 992px) {
               max-width: 60vw;
           }
           @media screen and (min-width: 1200px) {
               max-width: 30vw;
           }
        }

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

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

            .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;
            text-align: left;
        }

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

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

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