
.vote-widget {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* v1.1.3.903: canonical vote-btn flat style matching post-action-btn.
   Vasyl: "стилі поста та коментаря а саме віджетів Vote, реакцій різні?
   Зроби у віджетів такі стилі як у постів мають всюди". */
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin: 0 -4px;
  border: none;
  border-radius: var(--n-r-sm);
  background: transparent;
  color: var(--n-text-mute, #888);
  font-size: var(--n-fs);
  font-weight: var(--n-w-med);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--n-dur-base) var(--n-ease),
              background var(--n-dur-base) var(--n-ease);
  user-select: none;
  white-space: nowrap;
}
.vote-btn:hover:not(:disabled) {
  color: var(--n-accent);
  background: var(--n-accent-soft);
}
.vote-btn:active:not(:disabled) { transform: scale(.95); }

/* Active state — flat color change, no heavy soft background (canonical post style) */
.like-btn.active {
  color: var(--n-ok);
}
.dislike-btn.active {
  color: var(--n-danger);
}

.vote-btn i { font-size: var(--n-fs); }

.like-count, .dislike-count {
  font-variant-numeric: tabular-nums;
  min-width: 10px;
  text-align: left;
}

.vote-btn.is-disabled,
.vote-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.vote-widget[aria-busy="true"] { opacity: .65; pointer-events: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
