.hui-LeaderboardRow {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 80px;
  font-family: $font-copy;
  box-sizing: border-box;
  color: $grey;
  transition: 0.2s;
  cursor: pointer;
  position: relative;

  border-bottom: thin solid $grey-lightest;
}

.hui-LeaderboardRow__rank {
  display: table-cell;
  width: 86px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  background-color: lighten($grey-lighter, 10%);
}

.hui-LeaderboardRow__avatar {
  width: 86px;
  padding: 8px;
  display: table-cell;

  img {
    width: 100%;
    display: block;
    border: 4px solid white;
  }
}

.hui-LeaderboardRow__details {
  width: 100%;
  display: table-cell;
  vertical-align: top;
  padding: 8px;
  padding-left: 0;
}

.hui-LeaderboardRow__flipContainer {
  position: relative;
  margin-top: 5px
}

.hui-LeaderboardRow__ctas {
  transform: rotateX(180deg);
  transition: 0.2s;
  backface-visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;

  & > a, & > button {
    margin-top: 0;
  }

  & > a:first-child, & > button:first-child {
    margin-left: 0;
  }
}

.hui-LeaderboardRow__stats {
  transition: 0.2s;
  backface-visibility: hidden;
  opacity: 1;
}

.hui-LeaderboardRow--selected .hui-LeaderboardRow__ctas {
  transform: rotateX(0deg);
  opacity: 1;
}

.hui-LeaderboardRow--selected .hui-LeaderboardRow__stats {
  transform: rotateX(180deg);
  opacity: 0;
}

.hui-LeaderboardRow--candidate {
  background-color: $grey-lightest;
  border-color: white;

  .hui-LeaderboardRow__rank {
    background-color: lighten($grey-lighter, 7.5%);
  }
}

.hui-LeaderboardRow--selected {
  background-color: $green-active;
  color: white;

  .hui-LeaderboardRow__rank {
    background-color: darken($green-active, 10%);
  }
}

.hui-LeaderboardRow--highlighted {
  background-color: lighten($alert, 30%);

  .hui-LeaderboardRow__rank {
    background-color: lighten($alert, 20%);
  }
}

.hui-LeaderboardRow--highlighted.hui-LeaderboardRow--candidate {
  background-color: lighten($alert, 20%);

  .hui-LeaderboardRow__rank {
    background-color: lighten($alert, 10%);
  }
}

.hui-LeaderboardRow--selected.hui-LeaderboardRow--highlighted {
  color: white;
  background-color: $alert;

  .hui-LeaderboardRow__rank {
    background-color: darken($alert, 10%);
  }
}

.hui-LeaderboardRow__value {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  font-size: 16px;
  padding-right: 16px;
  width: 100px;
}

.hui-LeaderboardRow__pageName,
.hui-LeaderboardRow__charityName {
  margin: 0;
  font-size: 12px;
  line-height: 1.5em;
  @extend %truncate;
}

.hui-LeaderboardRow__charityName {
  margin: 0;
  max-width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}

.hui-LeaderboardRow--narrow {
  height: 136px;

  .hui-LeaderboardRow__flipContainer {
    width: 100%;
    top: 85px;
    left: 8px;
    position: absolute;
  }

  .hui-LeaderboardRow__stats {
    width: 100%;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .hui-ProgressBar {
    width: 100%;
  }

  .hui-LeaderboardRow__value {
    vertical-align: top;
    padding-top: 26px;
    font-size: 16px;
  }

  .hui-LeaderboardRow__rank {
    display: block;
    text-align: left;
    vertical-align: top;
    background-color: transparent;
  }

  &.hui-LeaderboardRow--highlighted.hui-LeaderboardRow--candidate .hui-LeaderboardRow__rank,
  &.hui-LeaderboardRow--highlighted.hui-LeaderboardRow--selected .hui-LeaderboardRow__rank {
    background-color: transparent;
  }
}

.hui-LeaderboardRow__raised {
  font-size: 12px;
}