/*
 * Creawith artwork engagement controls.
 *
 * Scope: artwork detail engagement icons only. Positioning remains owned by
 * creawith-work.css; AJAX state remains owned by creawith-interactions.js.
 */

.cw-artwork-engagement {
  --cw-engagement-ink: #171717;
  --cw-engagement-muted: #747979;
  --cw-engagement-like: #e3aa4f;
  --cw-engagement-favorite: #e34f66;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 44px;
}

.cw-artwork-engagement .work-like-btn,
.cw-artwork-engagement .cw-card-fav-btn {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cw-engagement-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    color 140ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .cw-artwork-engagement .work-like-btn:hover,
  .cw-artwork-engagement .cw-card-fav-btn:hover {
    color: var(--cw-engagement-ink);
  }
}

.cw-artwork-engagement .work-like-btn:active,
.cw-artwork-engagement .cw-card-fav-btn:active {
  opacity: 0.72;
}

.cw-artwork-engagement .work-like-btn:focus-visible,
.cw-artwork-engagement .cw-card-fav-btn:focus-visible {
  outline: 2px solid var(--cw-work-accent, #2e7c70);
  outline-offset: 2px;
}

.cw-artwork-engagement .cw-engagement-icon {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  pointer-events: none;
}

.cw-artwork-engagement .cw-fav-icon {
  background: none;
}

.cw-artwork-engagement .cw-engagement-icon path {
  vector-effect: non-scaling-stroke;
  fill: transparent;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cw-artwork-engagement .work-like-btn.active,
.cw-artwork-engagement .work-like-btn[aria-pressed="true"] {
  color: var(--cw-engagement-like);
}

.cw-artwork-engagement .work-like-btn.active .cw-like-icon path,
.cw-artwork-engagement .work-like-btn[aria-pressed="true"] .cw-like-icon path {
  fill: var(--cw-engagement-like);
  stroke: var(--cw-engagement-like);
}

.cw-artwork-engagement .cw-card-fav-btn.active,
.cw-artwork-engagement .cw-card-fav-btn[aria-pressed="true"] {
  color: var(--cw-engagement-favorite);
}

.cw-artwork-engagement .cw-card-fav-btn.active .cw-fav-icon path,
.cw-artwork-engagement .cw-card-fav-btn[aria-pressed="true"] .cw-fav-icon path,
.cw-artwork-engagement .cw-fav-icon.on path {
  fill: var(--cw-engagement-favorite);
  stroke: var(--cw-engagement-favorite);
}

.cw-artwork-engagement .work-like-btn:disabled,
.cw-artwork-engagement .cw-card-fav-btn:disabled,
.cw-artwork-engagement .work-like-btn[aria-busy="true"],
.cw-artwork-engagement .cw-card-fav-btn[aria-busy="true"],
.cw-artwork-engagement .work-like-btn.is-loading,
.cw-artwork-engagement .cw-card-fav-btn.is-loading {
  cursor: wait;
  opacity: 0.5;
}

.cw-artwork-engagement .work-like-btn:disabled:not([aria-busy="true"]),
.cw-artwork-engagement .cw-card-fav-btn:disabled:not([aria-busy="true"]) {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .cw-artwork-engagement .work-like-btn,
  .cw-artwork-engagement .cw-card-fav-btn {
    transition: none;
  }
}

@media (forced-colors: active) {
  .cw-artwork-engagement .work-like-btn,
  .cw-artwork-engagement .cw-card-fav-btn {
    color: ButtonText;
    forced-color-adjust: auto;
  }
}