.modal {
    --section-padding: var(--padding10);
    --modal-padding: var(--half-margin);
    --modal-header-height: 54px;
    --toolnav-height: 40px;
    --section-padding-bg-color: color-mix(in srgb, var(--black-bg) 4%, var(--white));
    --popup-header-backgroud-color: var(--section-padding-bg-color);
    --modal-height: calc(100dvh - var(--toolnav-height) - 2 * var(--gap20));
    --default-bg-color: var(--white);
    padding: 0;

    & .modal-header h3
    {
        line-height: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--gap5);
        color:var(--black);
    }

    & .modal-header {
        display: flex;
        align-items: center;
        background: var(--popup-header-backgroud-color);
        overflow: visible;
        justify-content: space-between;
        padding: var(--modal-padding);
    }

    & .modal-info {
        align-items: center;
        justify-content: center;
    }

    & :is(.modal-content, .modal-info) {
        display: flex;
        flex-direction: column;
        padding: var(--modal-padding);
        border-radius: var(--border-radius);
        background: var(--default-bg-color);
        margin: var(--margin10);
        gap: var(--gap20);
    }

    & .modal-info 
    {
        flex: unset;
    }

    & .modal-section 
    {
        display: grid;
        gap: var(--gap15);

        & textarea
        {
            height: 100%;
        }
    }

    & .modal-footer 
    {
        padding: var(--modal-padding);
    }

    & .modal-section.key-val 
    {
        grid-template-columns: 1fr 3fr;
    
        & .row
        {
            display: contents;
        }
    }
}