@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;
}

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;
}