/**
 * @file
 * 密碼欄位「顯示／隱藏」切換按鈕樣式。
 *
 * 刻意寫得與版型無關：按鈕以 JS 包在 input 外的 .sow-pwd-toggle-wrapper 為
 * 定位基準，不依賴 sow_theme 的任何 class，換版型也能用。因為 wrapper 緊貼
 * input，按鈕位置永遠對齊欄位本身，不受 label、description 或欄寬變動影響。
 *
 * 圖示沿用 view_password 的眼睛 SVG，讓登入頁（由 view_password 處理）與帳號
 * 編輯頁（由這裡處理）看起來一致。檔案是「複製」到 sow_cust 而不是用相對路徑
 * 指向 modules/contrib/view_password——後者一旦被停用或移除，這裡的圖示就會
 * 破圖，而 sow_cust 對 view_password 並沒有宣告相依。
 *
 * 兩個檔案都是 24x16、fill 為純黑（rgb(0,0,0)），適用淺底表單。
 */

/*
 * 定位基準。JS 會把 input 包進這層 <span>。
 *
 * 用 block 而不是 inline：<span> 預設是 inline，寬度會縮到內容寬，而且行高
 * 會讓底部多出幾 px 空隙。改成 block 讓它撐滿 .form-item 的寬度，尺寸就與
 * 原本 input 直接放在 .form-item 底下時一致，不影響既有版面。
 *
 * 這層只負責定位，不加 padding/margin/border，避免改變欄位間距。
 */
.sow-pwd-toggle-wrapper {
  position: relative;
  display: block;
}

/*
 * input 原本是 .form-item 的直接子元素、寬度由版型撐滿；包一層之後要確保它
 * 仍然填滿 wrapper，否則 Bootstrap 的 .form-control 之類規則若沒命中，
 * 欄位會縮成瀏覽器預設的 ~20 字元寬。
 */
.sow-pwd-toggle-wrapper > input {
  width: 100%;
  /* 寬度已含 padding，補上右側留白時才不會把欄位撐爆容器。 */
  box-sizing: border-box;
}

.sow-pwd-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  /* 寬度略大於圖示，讓點擊區達到易於點按的尺寸。 */
  width: 2.75rem;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  /*
   * 眼睛 SVG 是 24x16（非正方形），用 contain 讓它依原比例縮放。
   * 寫死等寬高會把圖示壓扁。
   */
  background-size: 20px auto;
  cursor: pointer;
  /* 蓋掉版型可能給 button 的通用樣式（圓角、陰影、min-width 等）。 */
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s ease-in-out;
}

.sow-pwd-toggle:hover,
.sow-pwd-toggle:focus-visible {
  opacity: 1;
  background-color: transparent;
}

/* 鍵盤操作要看得到焦點；滑鼠點擊則不顯示外框。 */
.sow-pwd-toggle:focus {
  outline: none;
}

.sow-pwd-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/*
 * 眼睛圖示，沿用 view_password 的檔案。
 *
 * 語意與 view_password 一致：密碼隱藏時顯示「劃掉的眼睛」（eye-close），
 * 點下去露出明碼後換成「張開的眼睛」（eye-open）。圖示表達的是「目前的狀態」
 * 而不是「點了會發生什麼」，與登入頁的行為對齊。
 */
.sow-pwd-toggle.is-hidden {
  background-image: url("images/eye-close.svg");
}

.sow-pwd-toggle.is-visible {
  background-image: url("images/eye-open.svg");
}

/*
 * 留出按鈕的空間，避免蓋住使用者輸入的字尾。
 *
 * 用 !important 是必要的：sow_theme 的 _p_user.scss 以
 * `form.user-form input[type="password"]` 這種較高權重的選擇器設了
 * `padding: 12px`（四邊簡寫），會覆蓋掉這裡的 padding-inline-end。
 * 這是唯一一處需要壓過版型的宣告，範圍限定在有切換鈕的欄位內。
 */
.sow-pwd-toggle-wrapper > input[type="password"],
.sow-pwd-toggle-wrapper > input[type="text"] {
  padding-inline-end: 2.75rem !important;
}