/**
* Linguise
*/
@media all {

    .linguise-langnav {
        opacity: 0;
        font-size: 0;
        display: none;
        min-width: var(--size-12);

        & > span {
            display: flex;
        }

        & #linguise_floating_wrapper {
            display: flex;

            & .linguise_switcher {

                & .linguise_switcher_popup {
                    position: relative;
                    padding: .5rem var(--bs-btn-padding-x);

                    &::after {
                        content: "";
                        mask-image: url("../Icons/sprite-svgs/arrow-single-down.svg");
                        background: currentColor;
                        height: 2rem;
                        width: 2rem;
                        position: static;
                    }

                    & .linguise_flags {
                        display: none;
                    }

                    & .linguise_lang_name {
                        position: relative;
                        margin: 0;

                        &::before {
                            min-width: 2.625rem;    
                        }

                    }

                }

            }

        }

    }

    .linguise-langnav:has([data-flag-ready="1"]) {
        opacity: 1;
        font-size: unset;
        display: flex;
    }

    #mobileNavLang .linguise-langnav .linguise_switcher_popup {
        padding: 0 !important;        
    }

    #linguise_popup_container {
        --flag-cols: 3;
        flex-direction: column-reverse;

        & #linguise-hint-injected {
            display: flex;
            padding: var(--size-1);
            margin-top: var(--size-2);
            background-color: var(--color-green);
            color: var(--color-offwhite);
            background-color: var(--color-offwhite);
            color: unset;
            border-radius: var(--border-radius-small);
            z-index: 9999999;
        }

        & .linguise_switcher {
            background: transparent !important;
            padding: 0 !important;
            overflow: visible !important;

            & > ul {
                display: grid !important;
                grid-template-columns: repeat(var(--flag-cols), minmax(0, 1fr)) !important;
                gap: var(--size-2);
                
                &:has( > :nth-child(1):last-child) {
                    --flag-cols: 1;
                }
                
                &:has( > :nth-child(2):last-child) {
                    --flag-cols: 2;
                }
                
                &:has( > :nth-child(3):last-child) {
                    --flag-cols: 3;
                }
                
                &:has( > :nth-child(4):last-child) {
                    --flag-cols: 4;
                }
                
                &:has( > :nth-child(5):last-child) {
                    --flag-cols: 5;
                }

                & > li {
                    flex-basis: 100% !important;
                    padding: 0 !important;

                    & a {
                        font-size: inherit !important;
                        border-radius: var(--border-radius-small);
                        background-color: var(--color-white);
                        box-shadow: var(--box-shadow-24) !important;
                        padding: var(--size-3) !important;
                        display: flex;
                        gap: var(--size-2);

                        & > .linguise_flags {
                            height: 1.25em !important;
                            width: auto !important;
                            aspect-ratio: 1.25 !important;
                            border-radius: calc(var(--border-radius-small) / 2) !important;
                            overflow: hidden;
                        }

                        & > .linguise_lang_name {
                            position: relative;

                            &::before {
                                content: "";
                                position: absolute;
                                inset: 0;
                                left: -25%;
                                top: 75%;
                                width: 150%;
                                height: auto;
                                aspect-ratio: 2;
                                opacity: 0;
                                background-size: 100% 100%;
                                background-position: center 40%;
                                background-repeat: no-repeat;
                                transition: var(--transition-default);
                                transition-property: opacity;
                                background-image: url("../Images/MainNav/mainnav-sub-hover-active-red.png");
                            }

                        }

                        &:focus ,
                        &:hover {

                            > .linguise_lang_name {
                                color: var(--ce-color-interactive) !important;

                                &::before {
                                    opacity: 1;
                                }

                            }

                        }

                        & > span {
                            margin: 0 !important;
                        }
                    }

                }

            }

        }

    }

    #linguise_background {
        background-color: var(--color-offwhite) !important;
        opacity: .9;
    }

    #linguise_popup_container #linguise_popup .close {
        height: 2rem !important;
        width: 2rem !important;
        background: none !important;
        inset: unset !important;
        right: 0 !important;
        bottom: calc(100% + var(--size-2)) !important;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            top: 75%;
            width: 100%;
            height: auto;
            aspect-ratio: 2;
            opacity: 0;
            background-size: 100% 100%;
            background-position: center 40%;
            background-repeat: no-repeat;
            transition: var(--transition-default);
            transition-property: opacity;
            background-image: url("../Images/MainNav/mainnav-sub-hover-active-red.png");
        }

        &:focus::before ,
        &:hover::before {
            opacity: 1;
        }

        &::after {
            content: "";
            display: block;
            mask-image: url("../Icons/sprite-svgs/cross.svg");
            background: currentColor;
            height: 2rem;
            width: 2rem;
            position: static;
        }

    }

}

@media (min-width: 62rem) {

    .linguise-langnav {

        & #linguise_floating_wrapper {

            & .linguise_switcher {

                &:focus ,
                &:hover {
                    color: var(--ce-color-interactive) !important;

                    & .linguise_lang_name {
                        color: var(--ce-color-interactive) !important;
                    }
                }

            }

        }

    }

    #linguise_popup_container {
        --flag-cols: 3;

        & .linguise_switcher {

            & > ul {

                & > li {

                    & a {
                        padding: var(--size-2) !important;

                    }

                }

            }

        }

    }

}