@import "settings";

// mainly for the placement in comments
.vote-widget {
  display: inline-block;
  vertical-align: middle;

  @include for-phone-only {
    width: 100%;
  }

  .vote-dislike {
    display: none;
  }

}

.vote__wrapper {
  display: flex;
  align-items: center;

  @include for-phone-only {
    justify-content: space-between;
  }
}

.vote-like {
  margin-right: 3px;
  cursor: pointer;

  @include for-phone-only {
    margin-right: 10px;
  }
}

.icon-vote {
  width: 18px;
  height: 18px;
  padding: 0 1px;
  line-height: 1;
  fill: transparent;
  stroke: $default-color;
  stroke-width: 15px;
  transition: 0.3s;
  vertical-align: text-top;

  @include for-phone-only {
    width: 22px;
    height: 22px;
  }

}

// specifity horror, override base component
svg[class^="icon-vote"] {
  vertical-align: text-bottom;
}

.vote__count {
  font-size: $font-size-small;
}


.vote-widget a.disable-status {
  cursor: default;

  .icon-vote {
    fill: transparent;
    stroke: $text-color;
  }

}

// Added like
.voted-like .icon-vote {
  fill: black;
  stroke: black;
}

.vote-like a:active {

  // Voted like focus
  &.voted-like .icon-vote {
    fill: black;
    stroke: black;
  }

  // Not voted like focus
  &:not(.voted-like) .icon-vote {
    stroke: black;
    fill: transparent;
  }

}

@include for-tablet-portrait-up {
  .vote-like a:hover {

    // Not voted like hover
    .icon-vote {
      stroke: black;
      fill: transparent;
      width: 20px;
      transition: 0.3s;
    }

    // Voted like hover
    &.voted-like .icon-vote,
    &.disable-status .icon-vote {
      fill: $text-color;
      stroke: $text-color;
      transform: none;
    }

  }

}


.view--who-liked {

  @include for-tablet-landscape-up {
    width: 500px;
  }

  .row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid $gray-lighter;
    padding: 0.5rem 0;

    &:last-child {
      border-bottom: 0;
    }

  }


  .views-field-rendered-entity-1 {
    flex: 0 0 54px;

    a:focus {
      outline: 0;
    }
  }

  .views-field-name {
    flex: 2 1 auto;
    min-width: 0; // critical to prevent children from growing
    a {
      @include singleLineEllipsis;
    }
  }

  .views-field-view-user {
    display: none;

    @include for-tablet-landscape-up {
      margin-right: 0;
      display: block;

      a {
        display: inline-block;
        margin-bottom: 0; // For input.btn
        font-weight: $btn-font-weight;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none; // Reset unusual Firefox-on-Android default style;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: $padding-base-vertical $padding-base-horizontal;
        font-size: $button-font-size;
        line-height: $line-height-base;
        user-select: none;
        transition: .3s ease-out;
        outline: 0;
      }

    }

  }

  .mini-pager {
    background-image: none;
  }
}