// Default style for ActiveList
@import "compass/css3";
@import "compass/typography/text/replacement";


// Because Compass sprites do not seems to work well in gems
@mixin active-list-sprite($name, $size: 16px) {
   background-image: image-url("active_list.png");
   background-repeat: no-repeat;
   height: $size;
   width: $size;
   $i: 0;
   @each $icon in menu check columns export pages first-page previous-page previous-line next-line next-page last-page sort sort-down sort-up true false {
      @if $icon == $name {
	 background-position: (-$i * $size) 0;
      }
      $i: $i + 1;
   }
}


@mixin active-list-theme($theme-color: #777777) {
   $default-border-color: mix($theme-color, #FFF, 30%);
   $menu-width: 250px;
   table.list {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid $default-border-color;
      z-index: 2;
      @include box-shadow(0 0 7px rgba(0, 0, 0, 0.15));
      thead {
	 th {
            border: 1px solid $default-border-color;
            padding: 2px 3px;
            @include background($theme-color linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)));
            &[data-list-column-sort] {
               i {
		  @include active-list-sprite(sort);
		  @include inline-block;
		  margin: 0 2px;
               }
               &.sor[data-list-column-sort="desc"] i {
		  @include active-list-sprite(sort-down); }
               &.sor[data-list-column-sort="asc"]  i {
		  @include active-list-sprite(sort-up); }
            }
            & { text-align: left; }
            html[dir="rtl"] & { text-align: right; }
	 }
      }
      tbody {
	 tr {
            td {
               padding: 2px 3px;
               border-top: 1px solid mix($theme-color, #FFF, 10%);
               border-bottom: none;
               border-left: none;
               border-right: none;
               &.chk,&.act, &.dld, &.bln, &.dat, &.web  { text-align:center }
               &.dec, &.flt, &.int {
		  & { text-align: right; }
		  html[dir="rtl"] & { text-align: left; }
               }
               &.country { white-space: nowrap; }
               &.color { color: white; text-shadow: 0 0 2px #000; width: 6ex; text-align: center; }
            }
            &:first-child td {
               border-top: none;
            }
	 }
      }

      @include list-colors(#FFFFFF);
   }

   .list-control {
      z-index: 0;
      @include background(transparentize(mix($theme-color, #FFF, 40%), 0.7));
   }

   .pagination {
      & { text-align: left; }
      html[dir="rtl"] & { text-align: right; }
      & > * {
         margin: 0 2px;
      }
      .first-page, .previous-page, .next-page, .last-page {
         @include inline-block;
         @include squish-text;
      }
      html[dir="rtl"] & .last-page,  & .first-page {
         @include active-list-sprite(first-page);
      }
      html[dir="rtl"] & .first-page,  & .last-page {
         @include active-list-sprite(last-page);
      }
      html[dir="rtl"] & .next-page,  & .previous-page {
         @include active-list-sprite(previous-page);
      }
      html[dir="rtl"] & .previous-page, & .next-page {
         @include active-list-sprite(next-page);
      }
      .separator {
         @include inline-block;
         width: 2px;
         height: 1.2em;
         background: transparentize($theme-color, 0.7);
      }
   }


   .settings {
      position: relative;
      background: none;
      .list-menu-start {
	 padding: 2px;
	 width: 16px;
	 height: 16px;
	 font-size: 0;
	 i { 
	    @include active-list-sprite(menu); 
	    display: block; 
	 }
      }
      &:hover {
	 .settings {
	    background-color: white;
	    z-index:5000;
	 }
      }
      ul {
	 width: $menu-width;
	 border: 1px solid $default-border-color;
	 background: #FFF;
	 @include box-shadow(0 0 5px rgba(0, 0, 0, 0.3));
	 li {
	    width: $menu-width;
	    padding: 0;
	    ul {
	       & { right: $menu-width; }
	       html[dir="rtl"] & { left: $menu-width; }
	    }
	 }
      }
      & > ul {
	 top: 19px;
      }
      li {
	 padding: 0;
	 display: block;
	 a {
	    display: block;
	    padding: 2px;
	    line-height: 18px;
	    font-weight: normal;
	    i {
	       height:16px;
	       width: 16px;
	       & { margin-right:  4px; }
	       html[dir="rtl"] & { margin-left: 4px; }
	    }
	    & * {
	       vertical-align: middle;
	    }
	    &.pages   i { @include active-list-sprite(pages); }
	    &.columns i { @include active-list-sprite(columns); }
	 }
	 &.export     i { @include active-list-sprite(export); }
	 &.check      i { @include active-list-sprite(check); }
	 &.checked    i { @include active-list-sprite(true); }
	 &.unchecked  i { @include active-list-sprite(false); }
	 &:hover {
	    text-decoration: none;
	    background: mix($theme-color, #FFF, 10%);
	 }
	 &.separator {
	    padding: 0;
	    height: 1px;
	    width: $menu-width - 6px;
	    margin: 3px;
	    background: $default-border-color;
	 }
      }
   }


}