
// @require core/widget/widget.scss
// @require widgets/icon/icon.scss

//TODO: Change the color of the counter and/or label if the icon is not present

/* LIKER */

.liker {

  /* NOT MULTIPLE */

  &:not(.multiple) {
    @extend %widget;
    display: flex;
  }

  /* LIKE / DISLIKE */

  .like,
  .dislike {

    cursor: pointer;

    /* MARGINS */

    &:not(:first-child) {
      margin-left: calc( #{$liker-inner-gutter} + #{$gutter-half} );
    }

  }

  /* ICONS */

  &:not(.no-icons) {

    /* LIKE / DISLIKE */

    .like,
    .dislike {

      /* BEFORE (ICON) */

      &:not(.no-icon):before {
        @extend %icon-base;
        margin-bottom: 0;
      }

      &[data-icon]:not(.no-icon):before {
        content: attr(data-icon);
      }

      &:not(.no-icon):not(:hover):before {
        opacity: $liker-counter-opacity;
      }

      &:not(.no-icon):hover:before {
        opacity: $liker-icon-hover-opacity;
      }

    }

    /* LIKE */

    .like:not(.no-icon) {

      /* BEFORE (ICON) */

      &:before {
        content: $liker-like-icon;
      }

    }

    /* DISLIKE */

    .dislike:not(.no-icon) {

      /* BEFORE (ICON) */

      &:before {
        content: $liker-dislike-icon;
      }

    }

    /* LIKED */

    &[data-state="true"] .like:not(.no-icon) {

      /* BEFORE (ICON) */

      &:before {
        color: $liker-icon-active-color;
      }

    }

    /* DISLIKED */

    &[data-state="false"] .dislike:not(.no-icon) {

      /* BEFORE (ICON) */

      &:before {
        color: $liker-icon-active-color;
      }

    }

  }

  /* COUNTERS */

  &:not(.no-counters) {

    /* LIKE / DISLIKE */

    .like,
    .dislike {

      /* AFTER */

      &:not(.no-counter):after {
        vertical-align: middle;
      }

      &[data-text-counter]:not(.no-counter):after {
        content: attr(data-text-counter);
      }

      &:not(.no-counter):after {
        opacity: $liker-counter-opacity;
      }

      &:not(.no-counter):hover:after {
        opacity: $liker-counter-hover-opacity;
      }

    }

    /* LIKE */

    .like:not(.no-counter) {

      /* AFTER */

      &:after {
        content: attr(data-likes);
      }

      /* NO COUNTER 0 */

      &:not([data-text-counter]).no-counter-0[data-likes="0"]:after {
        display: none;
      }

    }

    /* DISLIKE */

    .dislike:not(.no-counter) {

      /* AFTER */

      &:after {
        content: attr(data-dislikes);
      }

      /* NO COUNTER 0 */

      &:not([data-text-counter]).no-counter-0[data-dislikes="0"]:after {
        display: none;
      }

    }

    /* NO COUNTERS 0 */

    &.no-counters-0 {

      /* LIKE / DISLIKE */

      .like:not(.no-counter):not([data-text-counter])[data-likes="0"]:after,
      .dislike:not(.no-counter):not([data-text-counter])[data-dislikes="0"]:after {
        display: none
      }

    }

    /* MARGIN */

    &:not(.no-icons) {

      /* LIKE / DISLIKE */

      .like,
      .dislike {

        /* AFTER */

        &:not(.no-icon):after {
          margin-left: $liker-inner-gutter;
        }

      }

    }

  }

  /* LABELS */

  &:not(.no-labels) {

    /* LIKE / DISLIKE */

    .like,
    .dislike {

      /* AFTER */

      &:not(.no-label):hover:after {
        display: inline !important; // Since we may use `no-counters-0` or `no-couter-0` that use higher level selectors
        vertical-align: middle;
      }

      &:not(.no-label):hover:before {
        opacity: $liker-label-hover-opacity;
      }

    }

    /* LIKE */

    .like:not(.no-label) {

      /* AFTER */

      &:hover:after {
        content: $liker-like-text-on;
      }

      &[data-text-on]:hover:after {
        content: attr(data-text-on);
      }

    }

    /* DISLIKE */

    .dislike:not(.no-label) {

      &:hover:after {
        content: $liker-dislike-text-on;
      }

      &[data-text-on]:hover:after {
        content: attr(data-text-on);
      }

    }

    /* LIKED */

    &[data-state="true"] .like:not(.no-label) {

      /* AFTER */

      &:hover:after {
        content: $liker-like-text-off;
      }

      &[data-text-off]:hover:after {
        content: attr(data-text-off);
      }

    }

    /* DISLIKED */

    &[data-state="false"] .dislike:not(.no-label) {

      /* AFTER */

      &:hover:after {
        content: $liker-dislike-text-off;
      }

      &[data-text-off]:hover:after {
        content: attr(data-text-off);
      }

    }

    /* MARGIN */

    &:not(.no-icons) {

      /* LIKE / DISLIKE */

      .like,
      .dislike {

        /* AFTER */

        &:not(.no-icon):after {
          margin-left: $liker-inner-gutter;
        }

      }

    }

  }

}
