dialog {
    padding:0px;
    border-radius: var(--gears-shape-dialog);
    min-width: 280px;
    max-width: 560px;
    padding-bottom:24px;
    background-color: var(--gears-surface-color);
    color: var(--gears-onsurface-color);
    box-shadow: var(--gears-elevation-2);
    border:none;
    animation-name: enter_dialog_anim;
    animation-duration: .25s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.565, 1);
}
dialog section{
    width:100%;
    margin-bottom:16px;
    padding-left: 24px;
    padding-right: 24px;
}
dialog section div[role="img"] {
    text-align: center;
    font-size: 24px;
}
dialog::backdrop{
    background: rgba(0, 0, 0, 0.4);
    animation-name: backdrop_anim_enter;
    animation-duration: .25s;
}
dialog:focus-within, dialog:focus-visible {
    outline: none;
}

dialog.fullscreen {
    max-width: 560px;
    width:100%;
    height:100vh;
    min-width: none;
    background-color: var(--gears-surface-color);
    color: var(--gears-onsurface-color);
}

dialog.fullscreen section[role="heading"] {
    padding-top:16px;
    margin-bottom: 0px;
    padding-bottom: 8px;
    font-size: large;
    font-weight: 400;
}

dialog.fullscreen section[role="heading"] + hr {
    margin-top: 0px;
}
dialog.fullscreen section[role="heading"] i {
    padding-right:16px;
}
@media only screen and (max-width: 560px) {
    dialog.fullscreen {
        border-radius: 0px;
        box-shadow: none;
        margin-top: 0px;
        margin-bottom: 0px;
        max-height: none;
    }
    
    dialog.fullscreen section button[role="main"] {
        position: absolute;
        top:0;
        right:0;
    }
    dialog.fullscreen section[role="heading"] {
        position: fixed;
        top:0;
        background-color: var(--gears-primarycontainer-color);
        color: var(--gears-onprimarycontainer-color);
        z-index: 100;
    }
    dialog.fullscreen section[role="heading"]+section {
        margin-top:96px;
    }
}
.fullscreen {
    max-width: 560px;
    width:100%;
    height:100vh;
    min-width: none;
}

.sheet{
    position: fixed;
    width: calc(100vw - 104px);
    height: calc(100vh - 64px);
    margin-right: auto;
    margin-left: auto;
    max-width:640px;
    top:116px;
    z-index: 100;
    padding:0px;
    border:none;
    box-shadow: var(--gears-elevation-2);
    background-color: var(--gears-surfacecontainerlow-color);
    color : var(--gears-onsurface-color);
    animation-name: enter_animation;
    animation-duration: .25s;
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.sheet .handle {
    width:32px;
    height: 4px;
    border-radius:20px;
    background-color: var(--gears-onsurfacevariant-color);
    color: var(--gears-onsurface-color);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.sheet section[role="toolbar"] ul li {
    min-width:48px;
    width:48px;
    display: inline-block;
    text-align: center;
    margin-left: 8px;
    margin-right: 8px;
}
.sheet section[role="toolbar"] ul li svg{
    padding:0px;
}

@keyframes backdrop_anim_enter {
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.4);
    }
}
@keyframes enter_dialog_anim {
    from {
        opacity: .2;
        top:100%;
    }
    to {
        opacity: 1;
        top:0;
    }
}
@keyframes enter_animation {
    from {
        opacity: .2;
        top:100%;
    }
    to {
        opacity: 1;
        top:116px;
    }
}