/*
 * パスワード入力欄の表示切り替え（目玉マーク）
 *
 * front / manager2 / console2 は document root が同じ public/ なので、
 * 導線ごとにCSSを持たず、この1本を4導線から読み込む。
 * 各導線のSCSSに手を入れないので、手動コンパイルは発生しない。
 */

/* JS が input を包む要素。入力欄の見た目は各導線のCSSのままにする */
.c-password {
    position: relative;
    display: block;
}

.c-password__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #666;
    cursor: pointer;
    line-height: 1;
}

.c-password__toggle:hover {
    color: #333;
    background: rgba(0, 0, 0, .05);
}

.c-password__toggle:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 1px;
}

.c-password__toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 目玉のスラッシュは「表示中」のときだけ出す */
.c-password__toggle .c-password__slash {
    display: none;
}

.c-password__toggle[aria-pressed="true"] .c-password__slash {
    display: block;
}

/* ボタンと文字が重ならないように右側の余白を足す */
.c-password > input {
    padding-right: 44px;
}

/* Edge(Windows) はパスワード欄に標準の目玉ボタンを出すので、こちらの目玉と2つ並ばないよう消す（No.126） */
.c-password > input::-ms-reveal,
.c-password > input::-ms-clear {
    display: none;
}