.lang_selector {
    position: absolute;
    left: 100%; bottom: 100%; width: auto; height: auto;
    transform: translate(-50%,-1rem) scale(0.75);
    transform-origin: bottom;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.7);
    padding: 2rem;
    transition: opacity calc(var(--transition-duration) / 2), transform calc(var(--transition-duration) / 2);
    /* transition-delay: 0.2s; */
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    /* white-space: pre-line; */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
}

.lang_selector::before {
    content: '';
    position: absolute;
    left: 50%; top: 100%; transform: translate(-50%,0);
    width: 0px; height: 0px;
    border-style: solid;
    border-width: 10px 7px 0px 7px;
    border-color: rgba(0,0,0,0.9) transparent transparent transparent;
}


/* .lang_selector:hover, */
/* section[btns_common]:has(my-btn.lang:hover) .lang_selector, */
body.lang_selector_open .lang_selector {
    transition-delay: 0.0s;
    transform: translate(-50%,-1rem) scale(1);
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

@media (pointer: fine) {
    .lang_selector:hover {
        transition-delay: 0.0s;
        transform: translate(-50%,-1rem) scale(1);
        opacity: 1;
        pointer-events: all;
    }
}


.lang_selector button {
    position: relative;
    display: block; width: auto; min-width: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    padding: 1rem 3rem;
    color: #000000;
    border: 0;
    background-clip:padding-box;
    border-bottom: 1px solid transparent;
    background-color: rgba(200,200,200,1);
    cursor: pointer;
    overflow: hidden;
    transition: background-color var(--transition-duration);
    white-space: nowrap;
}

.lang_selector button:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.lang_selector button:last-child {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.lang_selector button::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%; width: 20rem; height: 20rem;
    background-color: rgba(0,0,0,1);
    border-radius: 10rem;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0);
    pointer-events: none;
}

.lang_selector button.selected {
    background-color: rgba(255,255,255,1);
}

.lang_selector button.selected::after {
    animation: lang_selector_btn_click var(--transition-duration);
}

@keyframes lang_selector_btn_click {
    from {
        opacity: 0;
        transform: translate(-50%,-50%) scale(0);
        background-color: rgba(0,0,0,1);
    }
    to {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1);
        background-color: rgba(0,0,0,0);
    }

}