:root {
  --text: #d8d8d8;
  --side-border: rgba(255,255,255,.08);
  --color-numbers: #5f5f5f;
  --color-hearth-active: #C84630;
  --color-comment-active: #7067CF;
  --color-shopping-active: #4A7B9D;
  --color-bookmark-active: #F9C80E;
}

.player-card__actions {
  gap: 20px;
  display: flex;
  justify-content: center;
}

.player-card__icon-number {
  flex: 1 0 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.player-card__icon-number p {
  margin: 0;
  color: var(--color-numbers);
}

.player-card__action {
  all: unset;
  display: grid;
  place-items: center;
  width: clamp(36px,5.2vw,44px);
  height: clamp(36px,5.2vw,44px);
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
}

.player-card__action:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--side-border);
}

.player-card__action svg {
  width: clamp(22px, 4.5vw, 28px);
  height: clamp(22px, 4.5vw, 28px);
  transition: transform .12s ease, opacity .12s ease, color .12s ease;
}

.like-btn .icon--on,
.save-btn .icon--on,
.cart-btn .icon--on {
  display: none;
}

.like-btn.is-liked .icon--off,
.save-btn.is-saved .icon--off,
.cart-btn.is-in-cart .icon--off {
  display:none;
}

.like-btn.is-liked .icon--on,
.save-btn.is-saved .icon--on,
.cart-btn.is-in-cart .icon--on {
  display: inline-block;
}

.like-btn.is-liked svg {
  color:var(--color-hearth-active);
}

.save-btn.is-saved svg {
  color:var(--color-bookmark-active);
}

.cart-btn.is-in-cart svg {
  color:var(--color-shopping-active);
}

.comment-btn.has-comment svg {
  color:var(--color-comment-active);
}