@import '../../style/mixins';
@import '../../style/colors';

.entry-list-item {
  border-bottom: 1px solid #e7e7e7;

  padding-bottom: 16px;
  padding-right: 38px;
  padding-top: 20px;

  @include themify(day) {
    border-bottom: 1px solid $white-four;
  }

  @include themify(night) {
    border-bottom: solid 1px $dark-two;
  }

  &:last-of-type {
    border-bottom-color: transparent;
  }

  .item-header {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 24px;
    margin-bottom: 10px;
    overflow: hidden;

    .author-part {
      align-items: center;
      cursor: pointer;
      display: flex;
      margin-right: 10px;

      .author-avatar {
        margin-right: 8px;
      }

      .author {
        font-weight: 700;

        @include themify(day) {
          color: $charcoal-grey;
        }

        @include themify(night) {
          color: $pinkish-grey;
        }

        .author-reputation {
          color: $steel-grey;
          font-weight: 500;

          &::before {
            content: '(';
          }

          &::after {
            content: ')';
          }
        }
      }
    }

    .category {
      border-radius: 25px;
      flex-shrink: 0;
      font-size: 12px;
      margin-right: 12px;
      padding: 2px 8px;
      transition: 0.5s;

      @include themify(day) {
        background-color: $silver;
        color: $white;
      }

      @include themify(night) {
        background-color: $dark-grey-blue;
        color: $silver;
      }

      &:hover {
        @include themify(day) {
          background-color: darken($silver, 10);
        }

        @include themify(night) {
          background-color: lighten($dark-grey-blue, 10);
        }
      }
    }

    .read-mark {
      background-color: $dark-sky-blue;
      border-radius: 50%;
      flex-shrink: 0;
      height: 4px;
      margin-right: 12px;
      width: 4px;
    }

    .date {
      color: $steel-grey;
      flex-shrink: 0;
    }

    .reblogged {
      align-items: center;
      color: $steel-grey;
      display: inline-flex;
      flex-shrink: 0;
      margin-left: 24px;

      .mi {
        margin-right: 4px;
      }
    }

    .space {
      flex-grow: 1;
    }

    .promoted {
      font-size: 90%;
      background: $dark-sky-blue;
      color: $white;
      padding: 2px 6px;
      border-radius: 12px;

      /*
      @include themify(day) {
        color: $silver;
      }

      @include themify(night) {
        color: $gunmetal;
      }*/
    }

    .redeem {
      .promote,
      .boost {
        font-size: 90%;
        opacity: 0.6;

        &:hover {
          opacity: 1;
        }
      }

      .promote {
        margin-right: 6px;
        padding-right: 6px;

        @include themify(day) {
          border-right: 1px solid $duck-egg-blue;
        }

        @include themify(night) {
          border-right: 1px solid $gunmetal;
        }
      }
    }
  }

  .item-body {
    @include clearfix();

    .item-image {
      align-items: center;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      float: left;
      height: 77px;
      justify-content: center;
      margin-right: 17px;
      overflow: hidden;
      width: 130px;

      img {
        border-radius: 4px;
        height: auto;
        max-width: 100%;
      }
    }

    .item-summary {
      float: right;
      width: calc(100% - 147px);

      .item-title,
      .item-body {
        cursor: pointer;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

      .item-title {
        font-weight: 700;
        margin-bottom: 9px;
      }

      .item-body {
        margin-bottom: 13px;
        @include themify(day) {
          color: $steel-grey;
        }

        @include themify(night) {
          color: $silver;
        }
      }
    }

    .item-controls {
      align-items: center;
      cursor: default;
      display: flex;
      float: right;
      width: calc(100% - 147px);

      .voting {
        margin-right: 10px;
      }

      .total-payout {
        color: $steel-grey;
        margin-right: 25px;

        @include themify(night) {
          font-weight: 500;
        }

        &.payout-declined {
          color: lighten($steel-grey, 15);
          text-decoration: line-through;
        }
      }

      .voters,
      .comments,
      .reblog-btn {
        align-items: center;
        color: $steel-grey;
        display: flex;

        margin-right: 25px;

        @include themify(night) {
          font-weight: 500;
        }

        .mi {
          margin-right: 5px;
          opacity: 0.5;
        }
      }

      .reblog-btn {
        .inner-btn {
          align-items: center;
          color: $steel-grey;
          display: flex;
        }

        &:hover {
          .inner-btn {
            color: $dark-sky-blue;
          }
        }

        &.reblogged-btn {
          .reblog-count,
          .inner-btn {
            color: $dark-sky-blue !important;
          }

          .inner-btn {
            pointer-events: none;

            .mi {
              opacity: 1 !important;
            }
          }
        }
      }

      .app {
        flex-grow: 1;
        text-align: right;

        @include themify(day) {
          color: $silver;
        }

        @include themify(night) {
          color: $gunmetal;
        }
      }
    }
  }

  &.promoted-item {
  }
}

.grid-view {
  .entry-list-item {
    margin-right: 2%;
    padding-right: 0;
    width: 49%;

    &:nth-child(2n) {
      margin-right: 0;
    }

    @media (min-width: 1600px) {
      margin-right: 1%;
      width: 32.6%;

      &:nth-child(2n) {
        margin-right: 1%;
      }

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    .item-body {
      .item-image {
        float: none;
        height: 200px;
        margin: 0 0 10px 0;
        width: 100%;
      }

      .item-summary {
        float: none;
        width: 100%;
      }

      .item-controls {
        float: none;
        width: 100%;
      }
    }
  }
}
