.mealz-like-button__icon img {
  display: none;
}

.mealz-like-button__icon .active {
  display: block;
}

.mealz-like-button:hover .mealz-like-button__icon .active {
  filter: brightness(0) invert(1);
}

.mealz-like-button {
  &.hidden {
    display: none;
  }
}

.mealz-like-button {
  padding: 8px;
  border: none;
  position: relative;

  &.mealz-ds-button.primary.reverse.square.small {
    background-color: var(--mealz-ds-color-background-primary, #FFF);

    &:hover:not(.loading):not(.disabled):not([disabled]) {
      background-color: var(--mealz-ds-color-background-primary-hover, #F0F3F4);
    }

    .mealz-like-button__icon {
      position: relative;
      height: 24px;
      width: 24px;

      img {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: opacity .3s ease-in-out;

        &.active {
          opacity: 1;
        }
      }
    }
  }
}