//
// GROUP ITEM — dark
// =================
//

.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: rgba(255, 255, 255, 0.04);
}

.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;
}