#pwa-install-element{
    .install-dialog.apple{
        --text-color-normal: #333;
        --text-color-description: #333;
        --background-color: rgba(255, 255, 255, 0.75);
        --text-color-button:#fff;
        --background-color-button:#fff;
        --background-color-button-active: #DBDAE0;
        --border-bottom-color: rgba(0, 0, 0, 0.1);

        font-family: system-ui, -apple-system, 'HelveticaNeue', BlinkMacSystemFont, "Roboto", "Segoe UI";

        // display: inline-grid;
        // grid-template-rows: 1fr auto;
        // grid-gap: 15px;

        max-width: 380px;
        width: auto;

        margin: 0 auto;
        // padding: 15px;

        right: 0;
        left: 0;

        font-size: 15px;
        color: var(--text-color-normal);

        bottom: 0;

        transition: transform .4s cubic-bezier(.33,1,.66,1), opacity .5s cubic-bezier(1,0,1,-2), border .35s ease-in-out;

        overflow: hidden;
        pointer-events: none;
        opacity: 0;
        visibility: visible;
        transform: translateY(100%);
        will-change: opacity, transform;

        &.dialog-body{
            display: grid;

            grid-template-columns: 95px auto 1fr;
            grid-template-rows: 1fr auto;

            grid-template-areas:
              "icon description"
              "welcome welcome"
              "how-to how-to"
              "gallery gallery"
              "button button";

            border-radius: 10px;

            border-bottom: 1px solid transparent;
            // transition: border .35s ease-in-out;

            background-color:var(--background-color);
            filter: drop-shadow(0 5px 15px rgba(0,0,0,.2));
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            // header{
            //     grid-area: header;

            //     display: flex;
            //     flex-flow: row nowrap;
            //     justify-content: space-between;

            //     h2{
            //         font-size: 18px;
            //         font-weight: 500;
            //         line-height: 1.125;
            //         margin: 0;
            //     }
            // }

            .icon{
                display: flex;
                align-items: center;

                grid-area: icon;

                border-bottom: 1px solid var(--border-bottom-color);

                .icon-image{
                    width: 64px;
                    height: 64px;

                    margin: 0 auto;
                    border-radius: 6px;
                }
            }

            .about {
                display: grid;
                grid-template-rows: 35px 60px;

                border-bottom: 1px solid var(--border-bottom-color);

                grid-area: description;

                .name, .description{
                    padding-right: 15px;
                    overflow: hidden;
                }
                .name{
                    font-weight: 600;
                    padding-top: 10px;
                    padding-right: 10px;
                    line-height: 22px;

                    align-items: flex-start;
                    display: flex;
                }
                .description{
                    font-size: 12px;
                    line-height: 15px;

                    margin-bottom: 15px;
                    overflow-y: auto;

                    color: var(--text-color-description);
                }
                .close{
                    height: 26px;
                    min-width: 26px;
                    line-height: 0;

                    margin-right: -3px;
                    margin-top: -3px;
                    margin-left: auto;

                    padding: 0px;
                    border-radius: 50%;

                    opacity: .5;
                    outline: none;

                    color: var(--text-color-normal);

                    border: none;
                    background-color: transparent;

                    cursor: pointer;

                    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;

                    svg{
                        fill: var(--text-color-normal);
                        width: 18px;
                    }

                    &:hover, &:active{
                        opacity: 1;
                        background-color: var(--background-color-button);
                    }
                }
            }

            .welcome-to-install{
                font-size: 15px;
                // grid-area: title;
                grid-area: welcome;

                text-align: left;
                font-weight: 400;
                padding: 15px;
                width: auto;

                border-bottom: 1px solid var(--border-bottom-color);
            }
        }
        .action-buttons{
            grid-area: button;

            grid-column-start: 1;
            grid-column-end: 3;

            // gap: 15px;
            padding: 15px;
        }
        .dialog-button{
            display: grid;

            height: 50px;
            width: 100%;
            line-height: 50px;

            border-radius: 8px;

            color: var(--text-color-normal);

            &.button{
                border: none;
                outline: none;

                font-family: system-ui, -apple-system, 'HelveticaNeue', BlinkMacSystemFont;

                cursor: pointer;

                user-select: none;
                font-weight: 400;
                font-size: 17px;
                padding: 0;
                margin: 0;

                background-color: var(--background-color-button);

                &.install{
                    padding: 0 15px;
                    text-align: left;

                    // display: inline-flex;

                    .button-text{
                        opacity: 0;

                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        transition: opacity .4s ease-in-out 0.1s;

                        overflow: hidden;

                        > span{
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }

                        > svg {
                            flex-shrink: 0;
                            transform: scale(.8);
                        }

                        &.show{
                            opacity: 1;

                            visibility: visible;
                            width: auto;
                            height: auto;
                        }
                        &.hide{
                            opacity: 0;
                            position: absolute;

                            width: 0px;
                            height: 0px;
                            visibility: hidden;
                        }
                    }
                }

                &.gallery{
                    display: flex;
                    align-items: center;

                    min-width: 50px;
                    width: auto;

                    margin-right: 15px;

                    #pwa-gallery{
                        margin: 0 auto;
                        width: 23px;
                        fill: var(--text-color-normal);
                    }
                }
                &:active{
                    background-color: var(--background-color-button-active);
                }
            }
        }
        .how-to-body{
            opacity: 0;
            max-height: 0px;

            overflow: hidden;

            transition: opacity ease-in-out .5s, max-height .5s ease-in-out;

            grid-area: how-to;

            .how-to-description{
                display: grid;
                user-select: none;

                grid-auto-columns: 1fr;
                grid-template-rows: 1fr 1fr;

                // grid-template-columns: 1fr 1fr 1fr;
                // grid-template-rows: auto 1fr;
                gap: 10px;
                // grid-template-areas:
                //     "title title title"
                //     ". . .";

                padding: 15px;
                padding-bottom: 0;


                .description-step{
                    display: inline-flex;
                    flex-direction: row;
                    gap: 15px;
                    align-items: center;

                    font-size: 14px;
                    .svg-wrap{
                        position: relative;
                        display: inline-flex;
                        flex-shrink: 0;
                        // background-color: var(--background-color-button);

                        width: 50px;
                        height: 50px;
                        align-items: center;

                        border-radius: 6px;
                        #pwa-share, #pwa-add, #pwa-safari{
                            margin: 0 auto;
                        }
                        #pwa-safari, #pwa-share{
                            fill: #527AFB;
                        }
                        #pwa-share{
                            margin-bottom: 4px;
                            transform: scale(0.75);
                        }
                        #pwa-add{
                            transform: scale(0.8);
                            fill: var(--text-color-normal);
                        }
                        #pwa-safari{
                            transform: scale(.92);
                        }

                        .step-count{
                            position: absolute;
                            line-height: 12px;
                            top: 3px;
                            left: 4px;
                        }
                    }
                    .step-text{
                        // margin-top: 5px;
                        font-weight: 600;
                        text-align: left;
                    }
                }
            }
        }
        pwa-gallery{
            grid-column: 1 / 3;

            max-height: 0;
            opacity: 0;

            transition: opacity ease-in-out .5s, max-height .5s ease-in-out;
            overflow: hidden;
            & + .action-buttons{
                display: flex;
                // grid-template-columns: 64px auto;
            }
        }
        &.available {
            opacity: 1;
            pointer-events: unset;
            transform: translateY(0);
            transition: transform .5s cubic-bezier(.33,1,.66,1), border .35s ease-in-out;
        }
        &.gallery{
            pwa-gallery{
                transition: opacity .3s ease-in-out .2s, max-height .5s ease-in-out;

                max-height: 70vh;
                overflow-y: auto;
                opacity: 1;
            }
        }
        &.how-to{
            .dialog-body{
                border-bottom: 1px solid #e0e0e0;
            }
            .how-to-body{
                opacity: 1;
                max-height: 400px;
                overflow-y: auto;

                transition: opacity .3s ease-in-out .2s, max-height .5s ease-in-out;
            }
        }
    }
}

$phone-small-landscape: 667px;

@media (min-width: $phone-small-landscape) {
    #pwa-install-element{
        .install-dialog.apple{
            top: 0px;
            bottom: unset;
            transform: translateY(calc(-100% - 40px));

            right: 150px;
            left: auto;

            &.available {
                top: 28px;
                bottom: auto;
                max-height: calc(95vh - 28px);
                // transition: top .5s ease-in-out, opacity .8s ease-in-out, max-height .35s ease-in-out;
            }
        }
    }
}

@media (min-width: $phone-small-landscape) and (max-width: 1366px) {
    #pwa-install-element{
        .install-dialog.apple{
            right: max(28px, env(safe-area-inset-right, 28px));
            left: auto;
        }
    }
}

@media (max-width: ($phone-small-landscape - 1px)) {
    #pwa-install-element{
        .install-dialog.apple{
            .description-step .step-text{
                font-size: 13px;
            }
            &.available{
                bottom: 20px;
                max-height: calc(85vh - 20px);
            }
        }
    }
}
@media (max-width: 428px) {
    #pwa-install-element{
        .install-dialog.apple.dialog-body{
            max-width: 100vw;
            .action-buttons{
                padding-bottom: max(15px, env(safe-area-inset-bottom))
            }
            &.available {
                bottom: 0px;
                max-height: 85vh;
            }

                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;

        }
    }
}
@media (max-height: 548px) {
    #pwa-install-element{
        .install-dialog.apple.dialog-body{
            &.available {
                overflow-y: auto;
                max-height: calc(90vh - 28px - env(safe-area-inset-bottom, 0px));
            }
        }
    }
}

// @media (max-width: 370px) {
//     #pwa-install-element{
//         .install-dialog.apple{
//             max-width: 300px;
//         }
//     }
// }

@media (prefers-color-scheme: dark) {
    #pwa-install-element{
        .install-dialog.apple {
            --text-color-normal: #fff;
            --text-color-description: #9E9AA1;
            --background-color: rgb(25 25 25 / 90%);
            --background-color-button:#353535;
            --background-color-button-active: #454545;
            --border-bottom-color: #353535;
        }
    }
}