dialog{
    margin              : auto; /* ini harus ada karena ada reset css di file variable.css */
    padding             : 2rem;
    display             : none; /* ini tidak perlu sebenarnya karena ini user agent style */
    opacity             : 0;
    transition-property : overlay; /*display opacity;*/
    transition-duration : 1s;
    transition-behavior : allow-discrete;
    
    /* translate        : 0 25vh; untuk animasi atas ke tengah  */
    /* animation        : Vanish 1s; */
}

dialog[open]{
    display         : block; /* ini tidak perlu sebenarnya karena ini user agent style */
    opacity         : 1;
    translate       : 0 0;

    @starting-style {
        opacity     : 0;
    }
    /* translate    : 0 -25vh; animasi tengah ke bawah */
    /* animation    : Appear 1s; */
}

dialog::backdrop{
    transition-property : opacity display overlay;
    transition-duration : 1s;
    transition-behavior : allow-discrete;
    opacity             : 0;
    background-image    : linear-gradient(45deg, var(--color-brand-3), var(--color-grey-modern));
}

dialog[open]::backdrop{
    opacity     : .85;
}

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

/* Keyframes Tampil */
/* @keyframes Appear {
    from {
        opacity : 0;
    }

    to {
        opacity : 1;
    }
} */
/* Keyframes Menghilang */
/* @keyframes Vanish {
    from {
        display : block;
        opacity : 1;
    }
    to {
        display : none;
        opacity : 0;
    }
} */


.modal{
    padding     : 2em;
    max-width   : 50ch;
    border      : 0;
    box-shadow  : 0 0 1em rgb(0 0 0 / .3);

    & > * {
        margin  : 0 0 0.5rem 0;
    }
}

/*.modal::backdrop{
   background: purple;*/
    /* background: linear-gradient(45deg, red, blue); */
    /* opacity: 0.9; 
}*/

.modal{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 1px solid black;
   border-radius: 10px;
   z-index: 10;
   background-color: white;
   width: 500px;
   max-width: 80%;
}

.modal-header{
   padding: 10px 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid black;
}

.modal-header .title{
   font-size: 1.25rem;
   font-weight: bold;
}

.modal-header .close-button {
   cursor: pointer;
}

.modal-body{
   padding: 10px 15px;
}