//
// GROUP ITEM — light
// ==================
// Stacked vertical list (used by coach advice, etc.). First item rounds
// the top, last item the bottom — middle items square so they read as
// one continuous list.
//

.group-item {
  position: relative;
  display: block;
  padding: 12px 16px;
  margin-bottom: -1px;
  background-color: $color--surface-card;
  border: 1px solid $color--border;
  font-weight: $font--weight--medium;
  color: $color--text;
  transition: background-color $motion--fast;
}

.group-item:hover {
  background-color: $color--surface;
}

.group-item.active {
  z-index: 2;
  color: $color--white;
  background-color: $color--blue;
  border-color: $color--blue;
}

.group-item:first-child {
  border-top-left-radius: $radius--md;
  border-top-right-radius: $radius--md;
}

.group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: $radius--md;
  border-bottom-left-radius: $radius--md;
}