@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

.language-switcher {
    border-top: func.border(vars.$language-switcher-border);
    background-color: func.color(vars.$language-switcher-background-color);
    padding-top: #{func.units(5)};

    @include mixins.media-breakpoint-up(md) {
        margin-top: -#{func.units(5)};
        padding-top: #{func.units(4)};
    }

    ul {
        max-width: none !important;
        @include mixins.unstyled-list;

        > li {
            margin-bottom: func.units(305);
            padding-left: func.units(6);


            @include mixins.media-breakpoint-up(md) {
                display: inline-flex;
                align-items: center;
                padding-left: 0;

                &::after {
                    display: inline-block;
                    content: "|";
                    margin-left: calc(#{func.units(4)} - 1px);
                    margin-right: #{func.units(4)};
                }

                &:last-of-type::after {
                    content: "";
                }
            }

            a,
            a:hover,
            a:visited,
            a:active,
            a:focus {
                color: func.color(vars.$language-switcher-text-color);
                display: inline-block;


                svg {
                    margin-top: -#{func.units(2)};
                    margin-right: #{func.units(3)};
                    display: inline-block;
                }
            }

            &:first-of-type {
                padding-left: 0;

                a,
                a:hover,
                a:visited,
                a:active,
                a:focus {
                    padding-left: 0;
                    font-weight: func.font-weight("semibold");
                    color: func.color(vars.$language-switcher-active-text-color);
                    text-decoration: none;
                    border-left: 0;
                }
            }

            &:last-of-type {

                a,
                a:hover,
                a:visited,
                a:active,
                a:focus {
                    padding-right: 0;
                }
            }
        }
    }

    .tooltip-wrapper {
        vertical-align: unset;
    }
}

.language-switcher-header {
    background-color: func.color(vars.$header-portal-background-color);
    display: none;

    @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
        display: block;
    }

    .container {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .select-language-button {
            font-size: func.font-size("xs");
            line-height: 1;
            display: flex;
            align-items: center;
            text-decoration: underline;
            padding-top: 0;
            padding-bottom: 0;
            min-height: 0;
            margin-top: func.units(3);
            margin-bottom: func.units(2);

            // Don't show an arrow under the button
            &::after,
            &::before,
            &[aria-expanded="true"]::after,
            &[aria-expanded="true"]::before {
                display: none;
            }

            .icon-svg {
                width: func.units(4, 'rem');
                height: func.units(4, 'rem');
                margin-right: func.units(2);
                fill: func.color("ink");
            }
        }

        .select-language-list {
            $icon-size: func.units(4, 'rem');
            $icon-list-margin-right: func.units(3);
            $icon-selected-margin-right: func.units(2);
            $inner-padding: func.units(4);
            $border-width: 1px;

            background-color: func.color(vars.$header-portal-background-color);
            top: calc(100% + func.units(1));
            left: calc(0px - $border-width - $inner-padding - ($icon-list-margin-right - $icon-selected-margin-right));
            min-width: 0;

            ul > li {
                padding-left: calc($icon-size + $icon-list-margin-right);
                font-weight: func.font-weight("normal");
                text-decoration: underline;

                &:first-of-type {
                    padding-left: 0;
                    font-weight: func.font-weight("semibold");
                    text-decoration: none;

                    a {
                        @include mixins.add-background-svg('check');
                        background-position: left 16px center;
                        background-size: $icon-size;
                        padding-left: calc($inner-padding + $icon-size + $icon-list-margin-right);
                    }
                }

                a, 
                button {
                    display: flex;
                    align-items: center;
                    line-height: 1.5;
                    font-weight: inherit;
                    
                    &:hover {
                        background-color: func.color("transparent");
                    }
                }
            }
        }
    }
}

.language-switcher-mobile {
    border-top: func.border(vars.$header-portal-mobile-border);
    background-color: func.color(vars.$header-portal-background-color);
    padding: func.units(5);

    h3 {
        font-size: func.font-size("sm");
        margin-bottom: func.units(4);
    }

    ul {
        max-width: none !important;
        @include mixins.unstyled-list;

        > li {
            margin-bottom: func.units(305);
            padding-left: func.units(6);

            a,
            a:hover,
            a:visited,
            a:active,
            a:focus {
                color: func.color(vars.$language-switcher-text-color);
                display: inline-block;

                svg {
                    margin-top: -(func.units(2));
                    margin-right: func.units(3);
                    display: inline-block;
                }
            }

            &:first-of-type {
                padding-left: 0;

                a,
                a:hover,
                a:visited,
                a:active,
                a:focus {
                    padding-left: 0;
                    font-weight: func.font-weight("semibold");
                    color: func.color(vars.$language-switcher-active-text-color);
                    text-decoration: none;
                    border-left: 0;
                }
            }

            &:last-of-type {
                margin-bottom: func.units(2);

                a,
                a:hover,
                a:visited,
                a:active,
                a:focus {
                    padding-right: 0;
                    margin-bottom: 0;
                }
            }
        }
    }
}