// 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] {
          .icon {
            @include active-list-sprite(sort);
            @include inline-block;
            margin: 0 2px;
          }
          &.sor[data-list-column-sort="desc"] .icon {
            @include active-list-sprite(sort-down); }
          &.sor[data-list-column-sort="asc"] .icon {
            @include active-list-sprite(sort-up); }
        }
        & { text-align: left; }
        html[dir="rtl"] & { text-align: right; }
        &.spe {
          width: 16px;
          height: 16px;
          .list-menu {
            position: relative;
            background: none;
            .list-menu-start {
              padding: 2px;
              width: 16px;
              height: 16px;
              .icon { @include active-list-sprite(menu); display: block; }
              .text { display: none; }
            }
            &:hover {
              .list-menu-start {
                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;
                .icon {
                  @include inline-block;
                  height:16px;
                  width: 16px;
                  & { margin-right:  4px; }
                  html[dir="rtl"] & { margin-left: 4px; }
                }
                .text {
                  @include inline-block;
                  width: $menu-width - 24px;
                  line-height: 18px;
                  font-weight: normal;
                }
                & * {
                  vertical-align: middle;
                }
                &.pages     .icon { @include active-list-sprite(pages); }
                &.columns   .icon { @include active-list-sprite(columns); }
              }
              &.export    .icon { @include active-list-sprite(export); }
              &.check     .icon { @include active-list-sprite(check); }
              &.checked   .icon { @include active-list-sprite(true); }
              &.unchecked .icon { @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;
              }
            }

          }
        }
      }
    }
    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);
  }
  .extras {
    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);
       }
    }
  }
}