main section {
  @include media-max(small) {
    &#contributions-unconfirmed, &#contributions-confirmed {
      margin-top: 0;
    }
  }
}

.quick-filter {
  font-size: 1.2rem;
  margin-bottom: 2rem;

  p {
    padding: 0.2rem 0 0;
  }

  label {
    &+ label {
      margin-left: 3.6rem;
    }
  }
}

ul.contribution-list {
  clear: both;
  width: 100%;

  li {
    display: grid;
    grid-template-columns: auto 5rem 5rem;
    grid-row-gap: 0.5rem;
    cursor: pointer;

    &.confirmed {
      grid-template-columns: auto 5rem;
    }

    &.vetoed {
      grid-template-columns: auto 5rem;
      text-decoration: line-through;
      opacity: 0.6;
    }

    &.grouped {
      grid-template-columns: auto 5rem;

      .avatars {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;

        img.avatar {
          margin-right: 0;
          margin-left: -0.6rem;
          border: 2px solid $item-background-color;
          box-sizing: content-box;
          z-index: 1;
          position: relative;

          &:first-child {
            margin-left: 0;
            z-index: 3;
          }

          &:nth-child(2) {
            z-index: 2;
          }
        }

        .avatar-overflow {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2rem;
          height: 2rem;
          margin-left: -0.6rem;
          border-radius: 1rem;
          background-color: $blue;
          color: #fff;
          font-size: 0.8rem;
          font-weight: 500;
          border: 2px solid $item-background-color;
          box-sizing: content-box;
          z-index: 0;
          position: relative;
        }
      }

      &.expanded {
        border-bottom: none;
      }
    }

    &.group-item {
      padding-left: 2.8rem;
      background-color: $item-highlighted-background-color;

      &:not(:last-child) {
        border-bottom: 1px solid $item-border-color;
      }
    }

    p {
      align-self: center;
      margin: 0;
      line-height: 2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.kredits-amount, &.voting {
        text-align: right;
      }
    }

    span {
      &.title {
        a {
          text-decoration: none;
          color: $body-text-color;
        }
        a:hover, a:active {
          color: $primary-color;
        }
      }
    }

    .description {
      line-height: 1.4em;
      font-size: 1rem;
    }

    .category {
      color: $blue;
      padding-right: 0.2rem;
      &.community { color: $red; }
      &.dev       { color: $pink; }
      &.design    { color: $yellow; }
      &.docs      { color: $green; }
      &.ops       { color: $purple; }
    }

    .amount {
      font-weight: 500;
    }

    .symbol {
      font-size: 0.8rem;
      padding-left: 0.2rem;
    }

    .recipient {
      font-weight: 500;
    }

    .votes {
      font-size: 1rem;
      color: $primary-color;
      margin-right: 0.5rem;
    }
  }
}