@import 'src/styles/variables';

.like {
  transition: fill, stroke 0.25s;
  will-change: transform;
  position: relative;
  flex: 0 0 32px;
  fill: currentColor;

  &.is_liked {
    opacity: 1;

    svg {
      fill: $color_like;
    }

    .like_count {
      color: $color_like;
    }
  }

  &:hover {
    @include pulse;

    fill: $color_like;

    .count {
      opacity: 0;
    }
  }
}

.count {
  position: absolute;
  font: $font_12_bold;
  left: 16px;
  bottom: 0;
  opacity: 1;
  transition: opacity 0.25s, color 0.25s;
  background: $content_bg_dark;
  padding: 0 3px;
  border-radius: 10px;
  z-index: 3;
  color: $gray_50;
  pointer-events: none;
  touch-action: none;
}
