/*
 * 言語切り替え（templates/components/lang_switcher.html）の見た目。ここだけに書く。
 * 置く側は、次の変数を上書きして色と大きさを合わせる（形は変えない）。
 *   --lang-fg        選ばれていない言語の文字
 *   --lang-fg-hover  ホバー時の文字
 *   --lang-fg-active 選ばれている言語の文字
 *   --lang-bg        全体の背景
 *   --lang-bg-active 選ばれている言語の背景
 *   --lang-border    全体の枠線
 *   --lang-radius    角の丸め
 *   --lang-size      文字の大きさ
 *   --lang-height    ボタンの高さ
 */
.lang-switcher {
    --lang-fg: #6b7280;
    --lang-fg-hover: #111827;
    --lang-fg-active: #111827;
    --lang-bg: transparent;
    --lang-bg-active: #ffffff;
    --lang-border: #e5e7eb;
    --lang-radius: 8px;
    --lang-size: 11px;
    --lang-height: 24px;

    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.lang-switcher__group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--lang-border);
    border-radius: var(--lang-radius);
    background: var(--lang-bg);
}

.lang-switcher__btn {
    -webkit-appearance: none;
    appearance: none;
    height: var(--lang-height);
    min-width: calc(var(--lang-height) + 6px);
    padding: 0 8px;
    border: 0;
    border-radius: calc(var(--lang-radius) - 2px);
    background: transparent;
    color: var(--lang-fg);
    font: inherit;
    font-size: var(--lang-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lang-switcher__btn:hover {
    color: var(--lang-fg-hover);
}

.lang-switcher__btn.is-current,
.lang-switcher__btn.is-current:disabled {
    background: var(--lang-bg-active);
    color: var(--lang-fg-active);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    cursor: default;
}

.lang-switcher__btn:focus-visible {
    outline: 2px solid var(--lang-fg-active);
    outline-offset: 1px;
}