.list-group {

  &-item {
    //FIXME: Add correct rem
    padding: 4.25rem;
    border-color: get-colour(grey-300);
    display: flex;
    text-decoration: none;
    align-items: center;

    &:first-child {
      border-top-left-radius: $border-radius-list-group;
      border-top-right-radius: $border-radius-list-group;
    }
    &:last-child {
      border-bottom-left-radius: $border-radius-list-group;
      border-bottom-right-radius: $border-radius-list-group;
    }
    &.active {
      @include component('dark'); //TODO: look into font-color, which is included
      @include border('dark', false);

      font-weight: bold;
      color: get-colour(white); //TODO: look into what color active should use
    }
  }
}