@import 'ext-base';

$list_color: #000 !default;
$list_bg_color: #f7f7f7 !default;
$list_highlights: true !default;

$list_pressed_color: lighten($active_color, 50%) !default;

@if $include_list == true {
  .x-list {
    background-color: $list_bg_color;
    
    .x-list-group-items > *,
    &.x-list-flat .x-list-parent > * {
      color: $list_color;
      
      @if $list_highlights == true {
        border-top: 1px solid lighten($list_bg_color, 30%);
        border-bottom: 1px solid darken($list_bg_color, 5%);
      }

      padding: .8em;
    
      strong {
        font-weight: bold;
      }
      
      &.x-item-pressed {
        border-top-color: lighten($active_color, 50%);
        background: $list_pressed_color none;
      }
      
      &.x-item-selected {
        @include bg_gradient($active_color);
        color: #fff;
        
        @if $list_highlights == true {        
          border-top-color: darken($active_color, 10%);
          border-bottom-color: darken($active_color, 20%);
        }
        
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
      }
    }
    
    .x-list-group {
      h3 {      
        @include bg_gradient(desaturate($base_color, 30%));
        border-top: 1px solid lighten($base_color, 30%);
        border-bottom: 1px solid darken($base_color, 10%);  
            
        font-size: 0.8em;
        color: #fff;
        padding: 0.2em 0.4em;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3);
      }
    }
  }
}