/*
 * input-action.css
 * InputAction 컴포넌트 전용 스타일 — input-action.js 와 반드시 세트로 사용
 *
 * ── 기본 구조 (텍스트 입력 / 초기화 버튼 1개) ──────────────────────────────
 *
 *  <div class="input_wrap">
 *    <div class="input_func" data-input-action data-input-action-type="text">
 *      <div class="input_wrap">
 *        <input class="form-control input_action_input--single"
 *               data-input-action-input placeholder="..." />
 *      </div>
 *      <div class="input_btn input_action_btn_wrap" data-input-action-buttons hidden>
 *        <button type="button" class="input_action_icon_btn" data-input-action-reset>
 *          <img class="input_action_icon input_action_icon--reset" src="i_btn_close.svg" alt="초기화" />
 *        </button>
 *      </div>
 *    </div>
 *  </div>
 *
 * ── 비밀번호 (토글 + 초기화 버튼 2개) ──────────────────────────────────────
 *
 *  <div class="input_wrap">
 *    <div class="input_func" data-input-action data-input-action-type="password">
 *      <div class="input_wrap">
 *        <input type="password" class="form-control input_action_input--double"
 *               data-input-action-input placeholder="..." />
 *      </div>
 *      <div class="input_btn input_action_btn_wrap input_action_btn_wrap--double"
 *           data-input-action-buttons hidden>
 *        <button type="button" class="input_action_icon_btn"
 *                data-input-action-toggle aria-pressed="false">
 *          <img class="input_action_icon input_action_icon--eye"
 *               data-input-action-toggle-icon
 *               data-icon-show="i_password_show.svg"
 *               data-icon-hide="i_password_hide.svg"
 *               data-alt-show="비밀번호 보기"
 *               data-alt-hide="비밀번호 숨기기"
 *               src="i_password_show.svg" alt="비밀번호 보기" />
 *        </button>
 *        <button type="button" class="input_action_icon_btn" data-input-action-reset>
 *          <img class="input_action_icon input_action_icon--reset" src="i_btn_close.svg" alt="초기화" />
 *        </button>
 *      </div>
 *    </div>
 *  </div>
 *
 * ── 클래스 / 속성 정리 ───────────────────────────────────────────────────────
 *  data-input-action               : 컴포넌트 루트 마커
 *  data-input-action-type          : "text"(기본) | "password"
 *  data-input-action-input         : 대상 input 마커
 *  data-input-action-buttons       : 버튼 래퍼 마커 (hidden 속성으로 초기 숨김)
 *  data-input-action-reset         : 초기화 버튼 마커
 *  data-input-action-toggle        : 비밀번호 토글 버튼 마커
 *  data-input-action-toggle-icon   : 토글 아이콘 img 마커
 *  input_action_input--single      : 버튼 1개용 padding-right
 *  input_action_input--double      : 버튼 2개용 padding-right
 *  input_action_btn_wrap--double   : 버튼 2개일 때 gap 적용
 */

/* -------------------------------------------------------
   버튼 래퍼
   clearCommon.css .input_btn 의 포지셔닝 기반:
     position: absolute; top: 50%; right: 16px
   여기서 right 와 transform 을 덮어써서 위치 미세 조정 지원.

   ── 수직 위치 미세 조정 (data-input-action-offset) ──────
   기본값은 0px (정중앙). 아이콘이 텍스트 라인과 맞지 않을 때
   컴포넌트 루트(input_func)에 data 속성만 추가하면 JS 가 자동 적용.
   inline style 불필요.

     양수 → 아래로 이동   예) data-input-action-offset="3"
     음수 → 위로 이동     예) data-input-action-offset="-3"

   예시:
     <div class="input_func" data-input-action
          data-input-action-offset="2">         ← 아이콘 2px 아래
------------------------------------------------------- */
.input_action_btn_wrap {
    display: flex;
    align-items: center;
    right: 10px !important;
    transform: translateY(calc(-50% + var(--input-action-offset, 0px))) !important;
}

.input_action_btn_wrap[hidden] {
    display: none !important;
}

.input_action_btn_wrap--double {
    gap: 6px;
}

/* -------------------------------------------------------
   아이콘 크기 조정 (data-input-action-size)
   기본값 18px. data-input-action-size="22" 처럼 루트에 지정하면
   버튼·아이콘·padding 이 모두 자동 연동됨.
------------------------------------------------------- */

/* 아이콘 버튼 — 크기는 --input-action-size 변수로 제어 */
.input_action_icon_btn {
    width: var(--input-action-size, 18px);
    height: var(--input-action-size, 18px);
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    flex-shrink: 0;
}

.input_action_icon_btn:hover {
    opacity: 1;
}

/* -------------------------------------------------------
   아이콘 이미지 크기
   버튼 크기(--input-action-size) 기준으로 비율에 맞게 축소
     reset(X) : 버튼의 67%   18px → 12px
     eye      : 버튼의 83%   18px → 15px
------------------------------------------------------- */
.input_action_icon {
    display: block;
}

.input_action_icon--reset {
    width: calc(var(--input-action-size, 18px) * 0.667);
    height: calc(var(--input-action-size, 18px) * 0.667);
}

.input_action_icon--eye {
    width: calc(var(--input-action-size, 18px) * 0.833);
    height: calc(var(--input-action-size, 18px) * 0.833);
}

/* -------------------------------------------------------
   input padding-right — 버튼 크기 변경 시 자동 연동
   right(10px) + 버튼크기 + 여백(10px)
   right(10px) + 버튼크기×2 + gap(6px) + 여백(10px)
------------------------------------------------------- */
.input_action_input--single {
    padding-right: calc(10px + var(--input-action-size, 18px) + 10px) !important;
}

.input_action_input--double {
    padding-right: calc(10px + var(--input-action-size, 18px) * 2 + 6px + 10px) !important;
}

/* -------------------------------------------------------
   Store setting modal overrides
   - toggle icon only (hide reset button)
   - keep action buttons inside fixed-width inputs (w228)
------------------------------------------------------- */
#storeSettingModal .input_wrap.type1 .input_func[data-input-action] {
    width: 228px;
    max-width: 100%;
}

#storeSettingModal .input_wrap.type1 .input_func[data-input-action] > .input_wrap {
    width: 100% !important;
}

#storeSettingModal .input_wrap.type1 .input_func[data-input-action] .form-control {
    width: 100% !important;
}

#storeSettingModal .input_wrap.type1 .input_action_btn_wrap {
    right: 12px !important;
}

#storeSettingModal .input_wrap.type1 [data-input-action-reset] {
    display: none !important;
}

#storeSettingModal .input_wrap.type1 .input_action_input--double {
    padding-right: calc(10px + var(--input-action-size, 18px) + 10px) !important;
}

/* Hide native browser password reveal/clear icons to avoid duplicate eye icon. */
[data-input-action] input[data-input-action-input][type="password"]::-ms-reveal,
[data-input-action] input[data-input-action-input][type="password"]::-ms-clear {
    display: none;
}

[data-input-action] input[data-input-action-input][type="password"]::-webkit-credentials-auto-fill-button,
[data-input-action] input[data-input-action-input][type="password"]::-webkit-strong-password-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}