@if (is_frontend_locale_switch_enabled())
    @php
        $switcher_current = app()->getLocale();
        $switcher_locales = frontend_locales();
    @endphp

    <div class="lang-switch" role="group" aria-label="Language">
        @foreach ($switcher_locales as $switcher_code => $switcher_label)
            <a class="lang-switch__item {{ $switcher_code === $switcher_current ? 'is-active' : '' }}"
               hreflang="{{ frontend_html_lang($switcher_code) }}"
               aria-current="{{ $switcher_code === $switcher_current ? 'true' : 'false' }}"
               href="{{ route('language.switch', ['locale' => $switcher_code, 'redirect_to' => request()->fullUrl()]) }}"
            >{{ $switcher_label }}</a>
        @endforeach
    </div>

    @once
        @push('style')
            <style>
                .lang-switch {
                    display: inline-flex;
                    align-items: stretch;
                    border: 1px solid rgba(255, 255, 255, .55);
                    border-radius: 999px;
                    overflow: hidden;
                    line-height: 1;
                    vertical-align: middle;
                }
                .lang-switch__item {
                    display: block;
                    padding: 4px 10px;
                    font-size: 12px;
                    font-weight: 700;
                    letter-spacing: .03em;
                    color: #fff;
                    text-decoration: none;
                    white-space: nowrap;
                }
                .lang-switch__item + .lang-switch__item {
                    border-left: 1px solid rgba(255, 255, 255, .4);
                }
                .lang-switch__item:hover,
                .lang-switch__item:focus {
                    color: #fff;
                    text-decoration: none;
                    background: rgba(255, 255, 255, .18);
                }
                .lang-switch__item.is-active,
                .lang-switch__item.is-active:hover,
                .lang-switch__item.is-active:focus {
                    background: #fff;
                    color: #111;
                }
            </style>
        @endpush
    @endonce
@endif