dialog {
    display: none;
    opacity: 0;
    translate: 0 25vh;
    transition-property: overlay display opacity;
    transition-duration: 0.6s;
    transition-behavior: allow-discrete;
    margin: auto;
    padding: auto;
    width: 90vw;
    min-width: 500px;
    max-width: min-content;
    border-radius: 10px;
    outline: none;
}

dialog.full-width {
    width: 90vw;
    min-width: 90vw;
    max-width: 90vw;
}

dialog[open] {
    display: block;
    opacity: 1;
    translate: 0 0;

    @starting-style {
        opacity: 0;
        translate: 0 -25vh;
    }
}

dialog::backdrop {
    transition-property: overlay display opacity;
    transition-duration: 0.6s;
    transition-behavior: allow-discrete;
    opacity: 0;
    background: black;
}

dialog[open]::backdrop {
    opacity: 0.75;
}

@starting-style {
    dialog[open]::backdrop {
        opacity: 0;
    }
}

dialog {
    border: none;
    outline: none;
    background: whitesmoke;

    .modal-close {
        position: absolute;
        top: 5px;
        right: 16px;
        color: gray;
        font-size: 2em;
        padding: 10px;
        cursor: pointer;

        & v-icon {
            width: 20px;
            fill: gray;
            display: inline-block;
        }
    }

    .modal-content {
        display: grid;
        grid-auto-rows: Auto;
        grid-gap: 24px;
        padding: 40px;

        .unlink {
            background: lightpink;
            color: black;
            border: 1px solid red !important;
        }

        .header {

            & h3,
            h4 {
                text-align: center;
                color: gray;
            }

            & h5 {
                display: inline;
                font-style: italic;
                color: gray;
            }

            .header-icon {
                display: inline-flex;
                position: relative;
                width: 64px;
                height: 64px;
                justify-content: center;
                padding: 10px;
                border-radius: 50%;
                margin-bottom: 10px;
            }

            .header-icon.red {
                background: rgba(205, 92, 92, 0.4);

                & v-icon {
                    color: rgb(205 92 92);
                }
            }

            .header-icon.green {
                background: rgba(143, 188, 143, 0.3);

                & v-icon {
                    color: rgb(143, 188, 143);
                }
            }

            .header-icon.blue {
                background: rgba(70, 130, 180, 0.2);

                & v-icon {
                    color: steelblue;
                }
            }

            & v-icon {
                width: 24px;
                fill: rgb(143, 188, 143);
                place-self: center;
                position: relative;
                top: 3px;
            }
        }

        .modal-row.left {
            text-align: left;
        }

        .modal-row.hide {
            display: none;
        }


        .modal-row.textarea {
            grid-row: span 2;
        }

        .modal-row {
            display: grid;
            grid-auto-columns: 1fr;
            grid-auto-flow: column;
            grid-gap: 1em;
            position: relative;
            height: 100%;
            text-align: center;

            >div {
                display: grid;
                position: relative;
            }


            & input:not([type=radio]),
            textarea,
            button,
            select {
                display: block;
                width: 100%;
                height: 55px;
                border-radius: 16px;
                box-sizing: border-box;
                font-size: 1em;
                border: 1px solid gray;
                font-family: inherit;
                outline: 0px;
                appearance: none;
            }

            & input,
            textarea,
            select {
                outline: none;
                padding-left: 16px;
            }

            & textarea {
                padding-top: 16px;
                height: 134px;
                /* 2x 55px + 24 (gap)) */
            }
        }

        .modal-row.icon {
            & v-icon {
                position: absolute;
                align-self: center;
                left: 10px;
                width: 24px;
                fill: darkslategray;
            }

            & input {
                padding-left: 50px;
            }
        }

        .modal-row.inline {
            grid-auto-columns: 1fr;
            grid-auto-flow: column;
            grid-gap: 1rem;
        }

        .modal-input {

            & input,
            button {
                display: inline-block;
                height: 50px;
                border-radius: 16px;
                box-sizing: border-box;
                font-size: 1em;
                border: 1px solid gray;
                font-family: inherit;
                outline: 0px;
                appearance: none;
            }

            & input {
                width: 100px;
                padding-left: 24px;
                margin-right: 24px;
            }

            & button {
                width: 100%;
            }
        }

        & input.invalid,
        textarea.invalid,
        select.invalid {
            border: 2px solid var(--invalid) !important;
        }

        & button {
            border: none;
            cursor: pointer;
        }

        & button.inline {
            display: inline-block;
        }

        & button.green {
            background: darkseagreen;
        }

        & button.red {
            background: salmon;
        }

        & button.disabled {
            pointer-events: none !important;
            background: lightgray !important;
            color: dimgray !important;
        }

        & table {
            table-layout: fixed;
            border-collapse: collapse;
        }

        & table tr.invalid {
            color: var(--meco-red);
        }

        & table th,
        table td {
            text-align: left;
            padding-block: 6px;
            vertical-align: top;
        }

        & table th:first-child,
        table td:first-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 24ch;
            padding-right: 10px;
        }

        & table th.wrap:first-child,
        table td.wrap:first-child {
            white-space: normal;
        }

        & table td.sub {
            background: gainsboro;
            font-style: italic;
            color: gray;
        }

        & table td.sub.invalid {
            color: var(--meco-red);
        }


        & table h5 {
            display: inline;
            font-style: italic;
            color: gray;
        }

        & v-icon {
            width: 20px;
            cursor: pointer;
        }

        & v-icon.red {
            color: var(--meco-red);
        }

        & v-icon.green {
            color: forestgreen;
        }

        & v-icon.gray {
            color: gray;
        }
    }

    .radio-list {
        font-size: 1.4em;
        padding-inline: 10px;
    }

    .radio-list label {
        display: grid;
        grid-template-columns: 1fr 32px;
        text-align: left;
        padding-block: 16px;
        border-bottom: 1px solid gray;
        cursor: pointer;
    }

    .radio-list input {
        width: 28px;
        justify-self: end;
    }

    .radio-list input:focus {
        outline: none;
    }

    .projects {
        margin-top: 24px;
        text-align: left;
    }

    .projects>div {
        margin-bottom: 24px;
    }

    .projects .project {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .projects .project label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 10px;
    }

    .projects .project span {
        text-align: right;
    }
}