/* list
---------------------------------------------------------------------------- */
.list-group {
  &.list-group-settings_list {
    margin-bottom: 0;

    .list-group-item {
      color: $color-forever_blue;
      border-radius: 0;
      border: 0;
      border-left: 5px solid transparent;
      background-color: $color-gray-100;

      &:hover {
        color: $color-gray-600;
        background-color: $color-gray-300;
      }
      &.active {
        color: $color-gray-600;
        border: 0;
        border-left: 5px solid $color-forever_green;
        background-color: $color-gray-300;
      }
      &:last-of-type {
        border-bottom-right-radius: $border-radius-large;
        border-bottom-left-radius: $border-radius-large;
      }
    }
  }
}

.list-group-item {
  @extend %item-style;
  @extend %no-shadow;
  border-radius: 0;

  &.active {
    background-color: color('secondary');
    border-color: color('secondary');

    &:hover,
    &:focus {
      background-color: color('secondary-dark');
      border-color: color('secondary-dark');
    }

    > .badge {
      color: color('secondary');
    }
  }

  // Round the first and last items
  &:first-child {
    border-top-right-radius: $border-radius-large;
    border-top-left-radius: $border-radius-large;
  }
  &:last-child {
    border-bottom-right-radius: $border-radius-large;
    border-bottom-left-radius: $border-radius-large;
  }

  @at-root #{&}.list-group-item-success {
    color: color('secondary');
  }
  @at-root #{&}.list-group-item-primary {
    color: color('secondary');
  }
  @at-root #{&}.list-group-item-secondary {
    color: color('secondary');
  }
  @at-root #{&}.list-group-item-info {
    color: color('secondary');
  }
  @at-root #{&}.list-group-item-accent {
    color: color('accent');
  }
  @at-root #{&}.list-group-item-warning {
    color: color('warning');
  }
  @at-root #{&}.list-group-item-danger {
    color: color('danger');
  }
}

.list-benefit {
  margin: 0.25em 20px 0 20px;
  padding-left: 30px;
  text-align: left;
  font-size: $font-size-default;
  list-style: none;
  background: image-url("forever_style_guide/check.png") no-repeat 0 0;

  @media(max-width: $screen-xs-min) {
    margin: 0;
  }
}

.list-roman {
  list-style: lower-roman;
  list-style-position: outside;
}

.panel {
  &.panel-settings {
    border: 0;

    // bootstrap selector override :(
    > .panel-heading {
      border-bottom: 2px solid $color-gray-300;
      background-color: $color-gray-100;
    }
  }
}

.panel-body-settings {
  padding: 0;
}