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

//TODO: Add liker-like counter classes

/* SUBSCRIBER */

.subscriber {

  /* NOT MULTIPLE */

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

  /* TOGGLE / COUNTER */

  .toggle,
  .counter {

    &:not(:first-child) {
      margin-left: $subscriber-inner-gutter;
    }

  }

  /* TOGGLE */

  .toggle {
    cursor: pointer;
  }

  /* COUNTER */

  .counter:before {
    content: attr(data-counter);
    vertical-align: middle;
  }

  /* ICON */

  &:not(.no-icon) {

    /* TOGGLE */

    .toggle {

      /* BEFORE (ICON) */

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

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

    }

    /* SUBSCRIBED */

    &[data-state="true"] .toggle:not(.no-icon):before {
      color: $liker-icon-active-color;
    }

  }

  /* LABEL */

  &:not(.no-label) {

    /* TOGGLE */

    .toggle:not(.no-label) {

      /* AFTER */

      &:after {
        vertical-align: middle;
        content: $subscriber-toggle-text-on;
      }

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

    }

    /* SUBSCRIBED */

    &[data-state="true"] {

      .toggle:after {
        content: $subscriber-toggle-text-off;
      }

      .toggle[data-text-off]:after {
        content: attr(data-text-off);
      }

    }

    /* UNSUBSCRIBED */

    &[data-state="false"] {

      .toggle:after {
        content: $subscriber-toggle-text-on;
      }

      .toggle[data-text-on]:after {
        content: attr(data-text-on);
      }

    }

    /* MARGIN */

    &:not(.no-icon) {

      /* TOGGLE */

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

    }

  }

}
