:root {
  & when (@config-dark-mode = false) {
    --vote-box-hover-color: #f4f6f8;
  }

  & when (@config-dark-mode = true) {
    --vote-box-hover-color: lighten(@body-bg, 3%);
  }
}

.CommentPost.votesAlternativeLayout {
  min-height: 165px;

  .Post-header {
    margin-right: 36px;
  }
}

.CommentPost.votesAlternativeLayout.votesUpvotesOnly {
  min-height: 150px;
}

.DiscussionListItem-votes.alternateLayout {
  + .DiscussionListItem-author {
    margin-left: -2px;
    margin-right: 12px;
  }

  + .DiscussionListItem-main {
    @media @phone {
      padding-right: 28px;
    }
  }
}

.DiscussionListItem-votes.alternateLayout,
.Post-votes {
  position: absolute;
  cursor: pointer;

  height: 42px;
  width: 36px;

  left: 0;

  background: @body-bg;

  border-radius: 4px;
  border: 1px solid fade(@primary-color, 80%);

  line-height: 24px;

  .LoadingIndicator-container {
    color: @control-color;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  button {
    position: relative;
    display: block;

    width: 100%;

    &[data-active] {
      color: @primary-color !important;
    }

    &:hover,
    &:focus,
    &:active {
      background: var(--vote-box-hover-color) !important;
    }

    .icon {
      position: absolute;
      top: 4px;
      left: 50%;
      margin-right: 0;
      transform: translateX(-50%);

      font-size: 1.2em !important;
    }
  }

  &[data-upvotes-only] {
    button {
      height: 100%;
    }

    .DiscussionListItem-voteCount,
    .Post-voteCount {
      position: absolute;
      bottom: 0;
      width: 100%;

      pointer-events: none;
      text-align: center;

      display: block;
      height: 24px;
    }
  }

  &:not([data-upvotes-only]) {
    height: 56px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;

    line-height: 1;

    span {
      text-align: center;
    }
  }
}

@screen-tablet-under: @screen-tablet - 0.01px;

.DiscussionListItem-votes.alternateLayout {
  top: 4px;

  @media (max-width: @screen-tablet-under) {
    left: 8px;
  }
}

.Post-votes {
  top: 12px;

  @media (max-width: @screen-tablet-under) {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    top: 0;
    left: 0;
  }
}

.Post-header .item-votes {
  @media @tablet-up {
    position: absolute;
    left: 34px !important;
    top: 84px !important;
    margin-right: 0;
  }

  @screen-tablet-under: @screen-tablet - 0.01px;

  @media (max-width: @screen-tablet-under) {
    position: absolute;
    right: 4px;
    top: 8px;
  }
}

.hasPane {
  &.panePinned,
  &.paneShowing {
    .DiscussionListItem-votes.alternateLayout {
      left: 6px;
    }
  }
}

.Post--hidden {
  &:not(.revealContent) .Post-actions {
    width: initial;

    .item-votes {
      display: none;
    }
  }
}

.CommentPost .Post-actions {
  width: 100%;
  text-align: right;

  .CommentPost-votes.alternateLayout {
    position: absolute;
    left: 0;

    button {
      padding: 0;
    }

    .Post-points {
      padding: 0 5px;
    }
  }
}
