.list-group {
  background-color: $brand-white;
  border-radius: $border-radius-base;
  border: 1.5px solid $brand-gray-lt;
  color: $brand-black;

  > .menuitem {
    @include link-no-underscore;
    position: relative;
    display: block;
    padding: 15px 10px;
    background-color: $brand-white;
    border-bottom: 1.5px solid $brand-gray-lt;
    color: $brand-black;
    cursor: pointer;
  }

  > .menuitem:hover { background: $brand-gray-lt; }

  > .menuitem:first-child {
    border-top-left-radius: $border-radius-base;
    border-top-right-radius: $border-radius-base;
    border-top: 0;
  }

  > .menuitem:last-child {
    border-bottom-left-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
    border-bottom: 0;
  }

  > .menuitem.-selected {
    color: $brand-white;
    cursor: default;
    background-color: $brand-primary;
  }

  > .menuitem.-selected > .icon { color: $brand-white; }

  > .menuitem > .icon { color: $brand-black; }

  > .menuitem > .icon:first-child {
    margin-right: 10px;
    // 16px is the default icon size
    // 4px = allowance
    width: 20px;
  }

  > .menuitem > .badge { 
    float: right; 
    background: $brand-primary;
    color: $brand-white;
  }

  > .menuitem.-selected > .badge { 
    float: right; 
    background: $brand-white;
    color: $brand-black;
  }
}