// Variables
//------------------------------------------------------
$list-primary:                                 $aqua-light !default;
$list-info:                                    $mint-light !default;
$list-warning:                                 $sunflower-light !default;
$list-success:                                 $grass-light !default;
$list-danger:                                  $grapefruit-light !default;

$list-primary-hover:                           $aqua-dark !default;
$list-info-hover:                              $mint-dark !default;
$list-warning-hover:                           $sunflower-dark !default;
$list-success-hover:                           $grass-dark !default;
$list-danger-hover:                            $grapefruit-dark !default;

$list-border-color:                            $lightgray-dark !default;
$list-background-color:                        $white !default;
$list-font-color:                              $darkgray-dark !default;
$list-font-color-hover:                        $mediumgray-dark !default;

$list-item-background-color:                   $lightgray-dark !default;

$list-radius:                                  4px !default;
$list-shadow:                                  0 1px 2px rgba(0, 0, 0, .2) !default;



// Exports
//------------------------------------------------------

@include exports("list") {

  /**
   * list
   * --------------------------------------------------
   */
  .list-group {
    @include radius($type: border-radius, $value: $list-radius);
    @include box-shadow($value: $list-shadow);
    @at-root &-item {
      border-color: transparent; 
      border-top-color: $list-border-color;
      &:first-child {
        border-top: none;
      }
      @at-root &-heading {
        color: $list-font-color;
      }
    }
  }


  a.list-group-item {
    color: $list-font-color;

    & .list-group-item-heading {
      font-size: 16px;
      color: $list-font-color;
    }

    &:hover,
    &:focus {
      background-color: $list-item-background-color;
    }
    &.active,
    &.active:hover,
    &.active:focus {
      background-color: $list-primary;
      border-color: $list-primary;
    }
    &.active .list-group-item-text,
    &.active:hover .list-group-item-text,
    &.active:focus .list-group-item-text {
      color: $list-background-color;
    }
  }
  .list-group-item-primary {
    color: darken($list-primary, 10%);
    border-color: $list-primary-hover transparent transparent transparent;
    background-color: $list-primary;
    &:first-child {
      border-color: transparent;      
    }
    @at-root a.list-group-item-primary {
      color: darken($list-primary, 30%);
      &:hover,
      &:focus {
        color: $list-background-color;
        background-color: $list-primary-hover;
      }
      &.active,
      &:hover,
      &:focus {
        background-color: $list-primary-hover;
        border-color: $list-primary transparent transparent transparent;
      }
    }
  }
  .list-group-item-success {
    color: darken($list-success, 10%);
    border-color: $list-success-hover transparent transparent transparent;
    background-color: $list-success;
    &:first-child {
      border-color: transparent;      
    }
    @at-root a.list-group-item-success {
      color: darken($list-success, 30%);
      &:hover,
      &:focus {
        color: $list-background-color;
        background-color: $list-success-hover;
      }
      &.active,
      &:hover,
      &:focus {
        background-color: $list-success-hover;
        border-color: $list-success transparent transparent transparent;
      }
    }
  }
  .list-group-item-warning {
    color: darken($list-warning, 10%);
    border-color: $list-warning-hover transparent transparent transparent;
    background-color: $list-warning;
    &:first-child {
      border-color: transparent;      
    }
    @at-root a.list-group-item-warning {
      color: darken($list-warning, 40%);
      &:hover,
      &:focus {
        color: $list-background-color;
        background-color: $list-warning-hover;
      }
      &.active,
      &:hover,
      &:focus {
        background-color: $list-warning-hover;
        border-color: $list-warning transparent transparent transparent;
      }
    }
  }
  .list-group-item-info {
    color: darken($list-info, 10%);
    border-color: $list-info-hover transparent transparent transparent;
    background-color: $list-info;
    &:first-child {
      border-color: transparent;      
    }
    @at-root a.list-group-item-info {
      color: darken($list-info, 30%);
      &:hover,
      &:focus {
        color: $list-background-color;
        background-color: $list-info-hover;
      }
      &.active,
      &:hover,
      &:focus {
        background-color: $list-info-hover;
        border-color: $list-info transparent transparent transparent;
      }
    }
  }
  .list-group-item-danger {
    color: darken($list-danger, 10%);
    border-color: $list-danger-hover transparent transparent transparent;
    background-color: $list-danger;
    &:first-child {
      border-color: transparent;      
    }
    @at-root a.list-group-item-danger {
      color: darken($list-danger, 30%);
      &:hover,
      &:focus {
        color: $list-background-color;
        background-color: $list-danger-hover;
      }
      &.active,
      &:hover,
      &:focus {
        background-color: $list-danger-hover;
        border-color: $list-danger transparent transparent transparent;
      }
    }
  }
}