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

        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 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,.5));
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);

            .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;
                }
            }

            .close{
                height: 26px;
                min-width: 26px;
                line-height: 0;

                margin-right: 7px;
                margin-top: 7px;
                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;

                grid-area: description;

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

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

            .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);
                }
                
            }

            .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;
                            width: 20px;
                        }

                        &.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 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;
                        color: var(--icon-how-to-color);

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

                        border-radius: 6px;
                        #pwa-share, #pwa-add, #pwa-safari{
                            margin: 0 auto;
                        }
                        // #pwa-safari, #pwa-share{
                        //     color: #527AFB;
                        // }
                        #pwa-share{
                            margin-bottom: 4px;
                            transform: scale(0.9);
                        }
                        #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;
                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;
            }
        }

        &.desktop{
            --text-color-normal: rgba(0, 0, 0, 0.85);
            --text-color-description: rgba(0, 0, 0, 0.85);
            --icon-how-to-color: rgba(0, 0, 0, 0.50);
            --background-color: rgb(246 246 246 / 85%);
            --background-color-button: #c6c1c6;
            --background-color-button-active: linear-gradient(0deg, rgba(64,121,250,1) 0%, rgba(84,144,251,1) 100%);
            // --background-color-button-active: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.00) 100%), #007AFF;
            --border-bottom-color: rgb(185 185 185);
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto;
            grid-template-areas:
                "icon"
                "description"
                "welcome"
                "how-to"
                "gallery"
                "button";
            gap: 0px;
            column-gap: 0px;
            padding: 16px;

            max-width: 260px;
            background: var(--background-color);
            border: 1px solid var(--border-bottom-color);

            .icon {
                height: 64px;
                padding-bottom: 16px;
                .icon-image{
                    border-radius: 10px;
                    width: 52px;
                    height: 52px;
                    // box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1);
                    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.15));
                }
            }
            .close{
                grid-area: icon;
                background: var(--background-color-button);
                opacity: 1;
                height: 20px;
                min-width: 20px;
                margin-right: -5px;
                margin-top: -5px;
                svg{
                    width: 14px;
                }
            }
            .about{
                display: flex;
                flex-direction: column;
                align-items: center;
                
                .name{
                    font-size: 13px;
                    line-height: 16px;
                    font-weight: 700;
                    padding: 0;
                }
                .description{
                    padding: 16px 0px;
                    margin: 0;
                    
                    padding-top: 10px;
                    border-bottom: 1px solid var(--border-bottom-color);
                    min-width: 100%;
                }
            }
            .welcome-to-install, .about .description{
                text-align: center;
                font-size: 11px;
                line-height: 14px;
            }
            .welcome-to-install, .about, .icon{
                border: none;
            }
            .welcome-to-install{
                padding: 0;
                padding-top: 16px;
            }

            .action-buttons{
                padding: 0;
                padding-top: 16px;
                .dialog-button.button{
                    font-size: 13px;
                    font-weight: 400;
                    padding: 6px 8px;
                    border-radius: 6px;
                    height: auto;
                    // min-height: 32px;
                    line-height: 18px;
                    
                    &.install{
                        color: #FFF;
                        background: var(--background-color-button-active);
                        transition: background .3s ease-in-out  0.1s, color .3s ease-in-out;
                        svg{
                            transform: none;
                            width: 18px;
                            // align-self: center;
                            // margin-top: -4px;
                        }
                    }
                    &.gallery{
                        width: 30px;
                        min-width: 30px;
                        margin-right: 10px;
                        background: var(--background-color-button);
                        #pwa-gallery{
                            width: 14px;
                            transition: transform .4s ease-in-out;
                        }
                        // border-radius: 5px;
                        // background: #FFF;
                        // box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.05), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.30);
                        // padding: 5px;
                    }
                }
            }

            .dialog-button.button, .close{
                &:active{
                    filter: brightness(105%);
                    .button-text{
                        filter:brightness(90%)
                    }
                }
            }

            .how-to-body{
                .how-to-description{
                    padding: 0px;
                    padding-top: 16px;
                    grid-template-rows: 1fr 1fr;
                    .description-step{
                        font-size: 12px;
                        gap: 16px;
                        .svg-wrap{
                            width: 32px;
                            height: 32px;
                            color: var(--icon-how-to-color);
                            #pwa-share{
                                width: 16px;
                                margin-bottom: 2px;
                                transform: none;
                            }
                            #pwa-add{
                                width: 18px;
                                transform: none;
                                
                            }
                        }
                    }
                }
            }

            &.gallery{
                #pwa-gallery{
                    transform: rotate(180deg);
                }
            }
            &.how-to{
                .action-buttons .dialog-button.button.install{
                    color: var(--text-color-normal);
                    background: var(--background-color-button);
                }
            }
        }
    }
}

$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: 28px;
            left: auto;

            &.available {
                top: 28px;
                bottom: auto;
                max-height: calc(95vh - 28px);
                // &.desktop{
                //     max-height: min(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);
            }
            &.dialog-body{
                filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 15px);
            }
        }
    }
}
@media (max-width: 428px) {
    #pwa-install-element{
        .install-dialog.apple.dialog-body{
            max-width: 100vw;
            filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px -5px 10px);

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

            .action-buttons{
                padding-bottom: max(15px, env(safe-area-inset-bottom))
            }
            &.available {
                bottom: 0px;
                max-height: 85vh;
            }
        }
    }
}
@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-height: 600px) {
    #pwa-install-element .install-dialog.apple pwa-gallery{
        overflow-y: auto;
    }
}

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

@media (prefers-color-scheme: dark) {
    #pwa-install-element{
        .install-dialog.apple.dialog-body {
            --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;

            .dialog-button.button, .close{
                &:active{
                    filter: brightness(105%);
                    .button-text{
                        filter:brightness(90%)
                    }
                }
            }
            
            &.desktop{
                --text-color-description: var(--text-color-normal);
                --icon-how-to-color: #bcb8b6; 
                --background-color: rgb(45 45 45 / 90%);
                --border-bottom-color: #5b5b5b;
                --background-color-button:#6d6765;
                --background-color-button-active: linear-gradient(0deg, rgba(59,108,200,1) 0%, rgba(66,123,250,1) 100%);
                outline: 1px solid #1c1c1c;
                color-scheme: dark;
            }
        }
    }
}