@import 'src/styles/variables';

.likes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  color: $gray_50;

  &.active {
    cursor: pointer;

    &::before {
      content: ' ';
      position: absolute;
      inset: -16px -10px -8px -40px;
    }

    &:not(.liked):hover .icon {
      @include pulse;
    }
  }

  &.liked {
    color: $color_like;
  }
}

.icon {
  position: relative;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.count {
  font: $font_12_semibold;
}
