$av-heart-val-emptyHeart: '\e83e';
$av-heart-val-filledHeart: '\e81d';
$av-heart-val-default-color: #4d4f53;
$av-heart-val-selected-color: #ed5624;
$av-heart-val-selected-color-hover: #f4997b;
$av-heart-val-iconSize: 16px;
$av-heart-val-borderSize: $av-heart-val-iconSize + 2;
.favorite-heart {
  font-size: $av-heart-val-iconSize;
  width: $av-heart-val-borderSize;
  height: $av-heart-val-borderSize;
  position: relative;
  outline: none;
  display: block;
  .default-filled,
  .outline,
  .selected-filled {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -($av-heart-val-iconSize / 2);
      margin-top: -($av-heart-val-iconSize / 2);
    }
  }
  .default-filled,
  .outline {
    color: $av-heart-val-default-color;
  }
  .default-filled,
  .selected-filled {
    overflow: hidden;
    width: 0;
    height: 0;
    border-radius: 0;
    &:before {
      content: $av-heart-val-filledHeart;
    }
  }
  // orange
  .selected-filled {
    color: $av-heart-val-selected-color;
    transition: all 0.5s ease;
  }
  // outline
  .outline {
    height: $av-heart-val-borderSize;
    width: $av-heart-val-borderSize;
    margin-left: -($av-heart-val-borderSize/2);
    margin-top: -($av-heart-val-borderSize/2);
    &:before {
      content: $av-heart-val-emptyHeart;
    }
  }
  &:hover, &:focus {
    .default-filled {
      height: $av-heart-val-borderSize;
      width: $av-heart-val-borderSize;
      border-radius: $av-heart-val-borderSize;
      margin-left: -($av-heart-val-borderSize/2);
      margin-top: -($av-heart-val-borderSize/2);
      transition: all 0.5s ease;
    }
    // .selected-filled {
    //
    // }
    // .outline {
    //
    // }
  }
  &.active {
    .default-filled,
    .selected-filled {
      height: $av-heart-val-borderSize;
      width: $av-heart-val-borderSize;
      border-radius: $av-heart-val-borderSize;
      margin-left: -($av-heart-val-borderSize/2);
      margin-top: -($av-heart-val-borderSize/2);
    }
    .default-filled {
      transition: none;
    }
    .selected-filled {
      transition: all 0.5s ease, color 0.1ms;
    }
    .outline {
      display: none;
    }
    &:hover, &:focus {
      .selected-filled {
        color: $av-heart-val-selected-color-hover;
      }
    }
  }
}