/* =====================================================
   KICKWISE HEADER LANGUAGE SWITCHER
   Component: resources/views/components/language-switcher.blade.php
===================================================== */

.kw-langdrop {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.kw-langdrop .kw-head-drop-trigger {
    width: auto;
    min-width: 40px;
    height: 26px;
    min-height: 26px;
    gap: 3px;
    padding: 0 3px;
    border-radius: 8px;
}

.kw-langdrop .kw-language-trigger-icon {
    width: 17.5px !important;
    height: 17.5px !important;
    flex: 0 0 17.5px;
    stroke-width: 1.48;
}

.kw-langdrop .kw-language-current-code {
    display: inline-flex;
    align-items: center;
    color: currentColor;
    font-size: 10px;
    font-weight: 540;
    letter-spacing: .02em;
    line-height: 1;
    opacity: .76;
}

.kw-langdrop .kw-head-drop-panel {
    width: 230px;
}

.kw-language-list {
    display: grid;
    gap: 2px;
    padding: 8px;
}

.kw-language-item {
    min-height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    color: #344054;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 520;
    transition: background .16s ease, color .16s ease;
}

.kw-language-item:hover,
.kw-language-item.is-active {
    background: rgba(0, 49, 114, .055);
    color: #003172;
}

html[data-theme="dark"] .kw-language-item {
    color: #d6deea;
}

html[data-theme="dark"] .kw-language-item:hover,
html[data-theme="dark"] .kw-language-item.is-active {
    background: rgba(255, 255, 255, .065);
    color: #ffffff;
}

.kw-language-code {
    width: 24px;
    flex: 0 0 24px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 760;
    letter-spacing: .04em;
    line-height: 1;
}

html[data-theme="dark"] .kw-language-code {
    color: #9aa8ba;
}

.kw-language-item.is-active .kw-language-code {
    color: currentColor;
}

.kw-language-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

@media (max-width: 720px) {
    .kw-langdrop .kw-head-drop-panel {
        width: min(292px, calc(100vw - 18px)) !important;
    }
}