.group {
  background: var(--color-ui-4);
  border: var(--color-ui-2-50);
  border-width: $group-border-width;
  border-style: $group-border-style;
  padding: $default-padding;
  border-radius: $group-border-radius;
  position: relative;
  margin-bottom: $half-padding;
  transition: all 0.4s;
}

.group.closed {
  padding-bottom: 0;
}

.group:before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  display: block;
  width: 0.4rem;
  height: 1.5rem;
  background: var(--color-highlight);
}

.group header {
  @include flex();
  @include flex-row();
}

.group header h3 {
  @include stretch();
}

.group-header {
  font-size: 1.2rem;
  opacity: 0.5;
  text-transform: uppercase;
  margin-bottom: $half-padding;
}