/*
  ed2_icon_buttons.css
  - icon-only / circle style UI controls
  - 목적: 게시판 댓글 👍👎, 리뷰 👍👎, 기타 아이콘 버튼을 "한 곳"에서 통일
  - 규칙: 페이지별 CSS에서 스킨(색/테두리/그림자/hover/focus)을 재정의하지 않는다.
*/

@layer components {

/* Base: circle icon button */
:where(.ui-icon-circle, .comment-vote, .rv-vote, .ad-rv-vote){
  appearance:none;
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  border:1px solid var(--ed2-line);
  background:var(--ed2-card);
  color:var(--ed2-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

:where(.ui-icon-circle, .comment-vote, .rv-vote, .ad-rv-vote):hover{
  border-color:#D1D5DB;
  filter: brightness(0.99);
}

:where(.ui-icon-circle, .comment-vote, .rv-vote, .ad-rv-vote):active{
  transform: translateY(1px);
}

:where(.ui-icon-circle, .comment-vote, .rv-vote, .ad-rv-vote):focus-visible{
  outline:none;
  border-color:rgba(107,196,184,.65);
  box-shadow:0 0 0 4px rgba(107,196,184,.18);
}

/* Disabled */
:where(.ui-icon-circle, .comment-vote, .rv-vote, .ad-rv-vote).is-disabled,
:where(.ui-icon-circle, .comment-vote, .rv-vote, .ad-rv-vote)[disabled]{
  opacity:.55;
  pointer-events:none;
  cursor: default;
  transform:none;
}

/* Size variants */
.ui-icon-sm{ width:34px; height:34px; }
.ui-icon-lg{ width:44px; height:44px; }

/* Optional: active state (toggle buttons) */
.ui-icon-circle.is-active,
.comment-vote.is-active,
.rv-vote.is-active,
.ad-rv-vote.is-active{
  border-color:rgba(107,196,184,.65);
  box-shadow:0 0 0 4px rgba(107,196,184,.12);
}

/* Emoji alignment */
:where(.comment-vote, .rv-vote, .ad-rv-vote) {
  font-size:16px;
}

/* When used with count text, keep it compact */
:where(.rv-vote, .ad-rv-vote) span{
  font-weight:900;
}

/* =====================================================
   Large circle vote buttons (work/actor favorites + vote)
   - Existing templates use: .wd-vote-circle + (.wd-vote-up/.wd-vote-down/.wd-fav-circle)
   - Goal: move ALL skin (border/bg/hover/focus/active) into this single file
   ===================================================== */

:where(.wd-vote-circle){
  appearance:none;
  width:78px;
  height:78px;
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid var(--ed2-line, #e5e7eb);
  background:var(--ed2-card, #fff);
  color:var(--ed2-text, #1f2933);
  cursor:pointer;
  user-select:none;
  transition:transform .06s ease, filter .15s ease;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

:where(.wd-vote-circle):hover{ filter:brightness(0.99); }
:where(.wd-vote-circle):active{ transform:translateY(1px); }
:where(.wd-vote-circle):focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(107,196,184,.28);
}

/* Disabled (native disabled + helper class)
   - client-side only 처리가 아니라, 서버에서도 동일 규칙(본인 추천 금지)을 강제한다.
   - 스타일은 :disabled / [disabled] 기반으로 통일한다.
*/
:where(.wd-vote-circle).is-disabled,
:where(.wd-vote-circle)[disabled]{
  opacity:.55;
  pointer-events:none;
  cursor: default;
  transform:none;
  filter:none;
}

:where(.wd-vote-icon){ line-height:0; }
:where(.wd-vote-emoji){ font-size:20px; line-height:1; display:inline-block; }
:where(.wd-vote-label){ font-size:12px; font-weight:900; margin-top:1px; }
:where(.wd-vote-count){ font-size:12px; font-weight:900; opacity:.95; }

/* Variants */
:where(.wd-vote-up){
  background:var(--ed2-card, #fff);
  border-color:var(--ed2-line, #e5e7eb);
  color:var(--ed2-muted, #6b7280);
}

:where(.wd-vote-down){
  background:var(--ed2-card, #fff);
  border-color:var(--ed2-line, #e5e7eb);
  color:var(--ed2-muted, #6b7280);
}

/* Toggle state */
:where(.wd-vote-circle).is-active{ transform:translateY(0); }
:where(.wd-vote-up).is-active{
  border-color:var(--ed2-mint, #6BC4B8);
  color:var(--ed2-mint-2, #58B3A7);
  box-shadow:0 10px 30px rgba(17,24,39,.06), 0 0 0 3px rgba(107,196,184,.12) inset;
}
:where(.wd-vote-down).is-active{
  border-color:var(--ed2-mint, #6BC4B8);
  color:var(--ed2-mint-2, #58B3A7);
  box-shadow:0 10px 30px rgba(17,24,39,.06), 0 0 0 3px rgba(107,196,184,.12) inset;
}

/* Favorite (찜) */
:where(.wd-fav-circle){
  background:var(--ed2-card, #fff);
  border-color:var(--ed2-line, #e5e7eb);
  color:var(--ed2-muted, #6b7280);
}
:where(.wd-fav-circle).is-active{
  background:var(--ed2-mint, #6BC4B8);
  border-color:var(--ed2-mint, #6BC4B8);
  color:#fff;
  box-shadow:0 10px 30px rgba(17,24,39,.10), 0 0 0 3px rgba(255,255,255,.35) inset;
}

@media (max-width: 520px){
  :where(.wd-vote-circle){ width:82px; height:82px; }
}

}