.button {
  border-radius: var(--border-radius);
  border: var(--border-pressed) transparent;
  color: var(--blue-400);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  padding: 1rem;
  transition: background var(--transition-default);
  transition: border var(--transition-default);
}

.button--fill {
  background-color: var(--blue-300);
}

.button--fill:hover {
  background-color: var(--blue-200);
}

.button--fill:active {
  background-color: var(--blue-200);
  border: var(--border-pressed) rgba(var(--blue-rgba-300), 0.72);
}

.button--fill:focus {
  background-color: var(--blue-100);
}

.button--outline {
  background-color: rgba(var(--blue-rgba-300), 0.08);
  color: var(--branco);
}

.button--outline:hover {
  background-color: rgba(var(--blue-rgba-300), 0.16);
}

.button--outline:active {
  background-color: rgba(var(--blue-rgba-300), 0.16);
  border: var(--border-pressed) rgba(var(--blue-rgba-300), 0.24);
}

.button--outline:focus {
  background-color: rgba(var(--blue-rgba-300), 0.24);
}

.button--icon {
  border-radius: calc(var(--border-radius) * 2);
  color: varr(--branco);
  padding: 0.5rem;
}
.button--icon:hover {
  background-color: rgba(var(--blue-rgba-300), 0.08);
}
.button--icon:active {
  background-color: rgba(var(--blue-rgba-300), 0.16);
}

#likes {
  fill: var(--branco);
  transition: all var(--transition-default);
}

.icon__like:hover .heart {
  animation: beating 0.4s infinite alternate;
}

.icon__like:hover #likes {
  animation: color 0.4s infinite alternate;
}

.icon__like:active #likes {
  fill: var(--red);
}

@keyframes beating {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

@keyframes color {
  from {
    fill: var(--branco);
  }
  to {
    fill: var(--red);
  }
}