app-module-btns-plan {
    position: absolute; 
    display: flex;
    box-sizing: border-box;
    --anim-transition-delay: 0.2s;
    opacity: 0;
    pointer-events: none;
    transition: left var(--anim-duration), right var(--anim-duration), opacity var(--anim-duration);
    --plan-btns-edge-position: 3rem;
}

app-module-btns-plan button {
    appearance: none;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 9rem; height: 9rem;
    border-radius: 5rem;
    border: 1.5px solid #ffffff;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 1rem rgba(0,0,0,0.3);
    transform: scale(1);
    opacity: 1;
    transition: background-color var(--anim-duration), transform var(--anim-duration), opacity var(--anim-duration), height var(--anim-duration), margin var(--anim-duration);
    transition-delay: var(--anim-transition-delay);
    pointer-events: all;
    cursor: pointer;
    touch-action: none;
} 

app-module-btns-plan button.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

app-module-btns-plan button.icon-loading {
    opacity: 0;
    transition: opacity 0s;
    transition-delay: 0s;
}


app-module-btns-plan button.active,
app-module-btns-plan button:active {
    background-color: #007AFF;
    transform: scale(0.95);
    /* transition: background-color calc(var(--anim-duration) / 3), transform calc(var(--anim-duration) / 3); */
    transition: background-color 0s, transform calc(var(--anim-duration) / 3);
    transition-delay: 0s;
}

app-module-btns-plan button.active {
    transform: scale(1);
    transition-delay: 0s;
}

app-module-btns-plan button .icon {
    position: absolute;
    left: 50%; top: 50%; width: 100%; height: 100%;
    font-size: 0; overflow: hidden;
    transform: translate(-50%,-50%);
    text-align: center;
    pointer-events: none;
}


app-module-btns-plan button .icon svg {
    width: 100%; height: 100%;
}

app-module-btns-plan button .icon svg path {
    transition: fill var(--anim-duration) , stroke var(--anim-duration) ;
    transition-delay: var(--anim-transition-delay);
}

app-module-btns-plan button.active .icon svg path,
app-module-btns-plan button:active .icon svg path {
    fill: #ffffff; 
    /* stroke: #ffffff; */
    /* transition: fill calc(var(--anim-duration) / 3), stroke calc(var(--anim-duration) / 3); */
    transition: fill 0s;
    transition-delay: 0s;
}

app-module-btns-plan button .icon-text {
    position: absolute;
    left: 50%; top: 38%; transform: translate(-50%,-50%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 4.4rem;
    font-weight: bold;
    line-height: 4.4rem;
    pointer-events: none;
    color: var(--ui-master-color);
    transition: color var(--anim-duration);
    transition-delay: var(--anim-transition-delay);
}

app-module-btns-plan button.active .icon-text,
app-module-btns-plan button:active .icon-text {
    color: #ffffff; 
    transition: color 0s;
    transition-delay: 0s;
}





app-module-btns-plan button .caption {
    position: absolute;
    left: 50%; bottom: 1.5rem; transform: translateX(-50%) scaleX(0.85);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 1.4rem;
    color: #555555;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
    transition: color var(--anim-duration);
    transition-delay: var(--anim-transition-delay);
}

app-module-btns-plan button.active .caption,
app-module-btns-plan button:active .caption {
    color: #ffffff;
    /* transition: color calc(var(--anim-duration) / 3); */
    transition: 0s;
    transition-delay: 0s;
}





app-module-btns-plan.lang {
    left: var(--plan-btns-edge-position); top: var(--plan-btns-edge-position);
    flex-direction: column;
    z-index: 100;
}

app-module-btns-plan.lang button {
    margin-bottom: 1.5rem;
}



app-module-btns-plan.zoom {
    left: var(--plan-btns-edge-position); bottom: var(--plan-btns-edge-position);
    flex-direction: column;
    z-index: 100;
}

app-module-btns-plan.zoom button {
    margin-top: 1.5rem;
}



app-module-btns-plan.route {
    right: var(--plan-btns-edge-position); bottom: var(--plan-btns-edge-position);
    flex-direction: column;
    z-index: 100;
}

app-module-btns-plan.route button {
    margin-top: 1.5rem;
}



app-module-btns-plan.plans {
    right: var(--plan-btns-edge-position); top: var(--plan-btns-edge-position);
    flex-direction: column;
    z-index: 100;
}

app-module-btns-plan.plans button {
    margin-bottom: 1.5rem;
}

app-module-btns-plan app-module-plan-trans {
    /* background-color: rgba(0,0,0,0.3); */
    right: 100%; width: 3rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anim-duration);
    z-index: 100;
    --path-width: 6;
    --path-color: var(--ui-master-color);
}