// DIALOG MODAL --------------------------------------------
dialog {

    position: fixed;
    inset: 50%;
    transform: translate(-50%, -50%);

    transition: background-color .4s cubic-bezier(0.075, 0.82, 0.165, 1);

    &[open] {

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
    }

    &::backdrop {

        background-color: rgba($color: #000000, $alpha: .6);
        backdrop-filter: blur(.8rem);
    }

    &:focus {

        //border: none;
        outline: unset;
    }
}

// CUSTOM MODAL --------------------------------------------
// Hidden Input

label[role="button"]:has( > input[type="checkbox"]) {

    & input[type="checkbox"] {

        display: none;
    }
}

// Changing State -> Checked

label[role="button"]:has( > input[type="checkbox"]:checked) {

    background-color: red; // Just a debug sign

    // Styling the Article with role dialog when the input is checked

    & + [role="dialog"] {

        display: grid;
       
    }
}

label[role="button"]:has( > input[type="checkbox"]) + [role="dialog"] {

    display: none;
   
    --_z-index: var(--index-popup);
    --_modal-top: 50%;
    --_modal-left: 50%;

    z-index: var(--_z-index);

    position: fixed;
    top: var(--_modal-top);
    left: var(--_modal-left);
    transform: translate(-50%, -50%);


    & [role="dialog"] {

        position: fixed;

        --_modal-top: inherit;
        
        //--_z-index: calc(var(--_z-index) - 1);
        //--_modal-top: calc(inherit + 1%);

        z-index: calc(var(--_z-index) - 5);

        top: var(--_modal-top);
    }
}

// Stop scrolling when a modal is opened

html:has(label[role="button"] > input[type="checkbox"]:checked) {
    overflow-y: visible;
}

// Defines the default styling of a modal (custom or dialog)

:is(
    dialog,
    article[role="dialog"],
    article[role="dialog"] article[role="dialog"]
) {

    --_modal-width: 50dvw;
    --_modal-height: 50dvh;

    --_spacing-y: var(--lg);
    --_spacing-x: var(--md);

    --_bg: var(--foreground-background);
    --_border: var(--border-md);

    --_text-align: start;

    width: var(--_modal-width, 50%);
    height: clamp(50%, var(--_modal-height), 100%);

   /*  padding-inline: var(--_spacing-x);
    padding-block: var(--_spacing-y); */

    overflow: hidden;

    border: var(--_border);

    background-color: var(--_bg);
    //text-align: var(--_text-align);

    // Building a layout

    & > * {

        padding-inline: var(--_spacing-x);
    }

    & > :is(header, footer) {

        border-radius: var(--roudness) 0;
    }

    & > header {

        background-color: var(--secondary);
        padding-inline: var(--_spacing-x);
        padding-block: var(--_spacing-y);
        
    }

    & > footer {

        --_spacing-y: var(--md);
        padding: var(--_spacing-y);

        background-color: var(--muted-secondary);
    }
}

// Closer
.modal-close {

    float: right;
    font-size: 2.4em;

    &:hover {

        color: var(--light-destructive);
    }

    transition: color .1s ease-in;
}