$toggle-list-bg: color('white');

.list-group-toggle {
  font-size: $font-size-300;

  .list-group-toggle-trigger {
    padding: 2px 10px 6px;
    float: right;
    color: color('gray-500');
    font-size: $font-size-small;
    background-color: $toggle-list-bg;
    box-shadow: none;

    &:hover {
      color: color('secondary');
      cursor: pointer;
      background-color: $toggle-list-bg;
    }
    &:focus,
    &:active {
      background-color: $toggle-list-bg;
      box-shadow: none;
    }
  }
  .list-group-item {
    padding: 5px;
    background-color: $toggle-list-bg;
    border-color: color('gray-300') $toggle-list-bg $toggle-list-bg;

    &:last-child {
      border-bottom-color: color('gray-300');
    }
  }
  .list-group-item.is_active {
    border-right-color: color('gray-300');
    border-left: 2px solid color('primary');

    &:hover {
      background-color: $toggle-list-bg;
    }
  }
  .list-group-link {
    display: inline-block;
    padding: 0;
    color: color('secondary');
    border: 0;

    &:hover,
    &:active,
    &:focus {
      color: color('secondary');
      border: 0;
      background: none;
      text-shadow: none;
    }
    &.list-group-link-is_active {
      display: inline-block;
      padding: $padding-xs-vertical $padding-xs-horizontal;
      color: color('white');
      background-color: color('secondary');
      border-color: color('gray-300');
      border-radius: $border-radius-large;

      &:hover,
      &:focus,
      &:active,
      &:active:focus {
        color: color('white');
        background-color: color('secondary');
        text-decoration: none;
      }
      .fa {
        padding-left: $padding-small-horizontal;
      }
    }
  }
  .list-group-item-child {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0.8;
    @include transition(max-height 0.3s ease-in-out, margin-top 0.2s ease-in-out, opacity 0.2s ease-in-out);

    &.is_open {
      max-height: 300px; // may need adjusted given list length
      opacity: 1.0;
    }
    .list-group-item {
      padding-left: 10px;
      border: 0;
    }
    .list-group-item.is_active {
      border: 0;
    }
    .list-group-link-is_active {
      margin-left: -$padding-xs-horizontal;
    }
  }
}