@charset "utf-8";
/* =============================================================
 * パスワード入力欄に入力内容の表示/非表示切替用のアイコンを追加する
 *   passwordToggle.js から設定される
 *   既存スタイルの干渉回避用にセレクタ指定は長めで詳細度上げ (netapp/netapp_school/secpost/amsが対象)
 * ============================================================= */
:root {
    --pw-toggle-image-url-eye: url(../images/common/eye.svg);
    --pw-toggle-image-url-eye-off: url(../images/common/eye-off.svg);
    --pw-toggle-accent: #2f74c0;
    --pw-toggle-ink: #7a8592;
    --pw-toggle-ink-on: #2f74c0;
}

/* 既存スタイルをリセット */
span.pw-toggle-wrap,
span.pw-toggle-wrap div.pw-toggle-inner,
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn,
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn .pw-toggle-icon {
    all: unset;
}

span.pw-toggle-wrap div.pw-toggle-inner {
    position: relative;
    display: block;
}
span.pw-toggle-wrap div.pw-toggle-inner input {
    padding-right: 38px;
}

/* ブラウザ標準のパスワード表示ボタン (Edge/IE の ::-ms-reveal) を抑止
   抑止しないと本機能の目アイコンと並んで二重に表示される
   ラッパ配下に限定せず input[type="password"] 全体に当てているのは、この JS が
   window の load 後にラッパを付けるため、限定すると load 前に入力された場合に
   標準ボタンが一瞬見えてしまうから (CSS なら読込時点から効く)
   ::-ms-clear (IE系のクリアボタン) は表示状態 (type="text") に出るので、
   無関係なテキスト欄に及ばないよう本機能が付けたクラスで限定する
   1ルール1セレクタに分けているのは、未対応の擬似要素が同じセレクタリストに
   混ざるとリストごと無効になり抑止が効かなくなるため */
input[type="password"]::-ms-reveal {
    display: none;
}
input.pw-toggle-input::-ms-clear {
    display: none;
}

span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 2px;
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn:focus-visible {
    outline: 2px solid var(--pw-toggle-accent);
    outline-offset: -2px;
}

span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn .pw-toggle-icon {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
    mask-repeat: no-repeat;
    mask-size: contain;
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn .pw-toggle-icon.icon-on {
    mask-image: var(--pw-toggle-image-url-eye);
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn .pw-toggle-icon.icon-off {
    mask-image: var(--pw-toggle-image-url-eye-off);
}

span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn .pw-toggle-icon {
    background-color: var(--pw-toggle-ink);
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn:focus .pw-toggle-icon {
    background-color: var(--pw-toggle-ink);
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn:hover .pw-toggle-icon {
    background-color: var(--pw-toggle-ink-on);
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn[aria-pressed="true"] .pw-toggle-icon,
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn[aria-pressed="true"]:focus .pw-toggle-icon {
    background-color: var(--pw-toggle-ink-on);
}

span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn .icon-off {
    display: none;
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn[aria-pressed="true"] .icon-on {
    display: none;
}
span.pw-toggle-wrap div.pw-toggle-inner .pw-toggle-btn[aria-pressed="true"] .icon-off {
    display: block;
}