.language-picker > summary {
    position: relative;
}

.language-flag {
    display: inline-block;
    flex: 0 0 auto;
    width: 26px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.language-flag[data-flag="ru"],
.language-flag[data-language-flag="ru"] {
    background-image: url("flags/ru.svg");
}

.language-flag[data-flag="en-us"],
.language-flag[data-language-flag="en-us"] {
    background-image: url("flags/us.svg");
}

.language-flag[data-flag="kk"],
.language-flag[data-flag="kk-latn"],
.language-flag[data-language-flag="kk"],
.language-flag[data-language-flag="kk-latn"] {
    background-image: url("flags/kz.svg");
}

.language-picker-menu {
    flex-direction: column;
    min-width: 205px;
}

.language-picker-menu > button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--main-text);
    font: inherit;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

.language-picker-menu > button:hover,
.language-picker-menu > button[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--link);
}

.language-picker :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.portal-i18n {
    display: contents;
}