/*********
 * Lists *
 *********/

.list, .list-row {
  background-color: w_color(normal);
  color: w_color(text);
  border-width: 0px;
  &:backdrop {
    background-color: backdrop(w_color(normal));
    color: backdrop(w_color(text));
  }
}

.list-row,
.grid-child {
  padding: 0px 2px;
  border-style: solid;
  border-width: 0px;
  border-color: w_color(normal);
}

.list-row.button,
.list-row.button:backdrop,
.list-row.button:backdrop:active,
.list-row.button:backdrop:checked,
.list-row.button:backdrop:insensitive,
.list-row.button:backdrop:insensitive:active,
.list-row.button:backdrop:insensitive:checked,
.list-row.button:insensitive:active,
.list-row.button:insensitive:checked {
  // reset button inherited stuff
  @extend %undecorated_button;
  background-color: transparentize(v_color(normal),1); // for the transition
  border-style: none; // I need no borders here
  border-radius: 0;   // and no rounded corners
  box-shadow: none;   // and no box-shadow

}

.list-row.button {
  background-color: w_color(normal);
  &:hover {
    background-color: transparentize(b_color(hover), 0.75);
  }
  &:active {
    background-color: s_color(normal);
    box-shadow: none;
  }
  &:selected {
    &:active { box-shadow: none; }
    background-color: s_color(normal);
    &:hover {
      @include button(active-hover);
    }
    &:backdrop {
      background-color: backdrop(s_color(backdrop));
    }
  }
  &:backdrop { background-color: backdrop(w_color(normal));}
}

.list-row:selected {
  @extend %selected_items;
  .button {
    @include button(normal);
      &.flat {
      @include button(undecorated);
    }
    &:hover {
      @include button(hover);
    }
    &:active, &:checked {
      @include button(active);
    }
    &:backdrop, &.flat:backdrop {
      @include button(backdrop);
      &:active, &:checked {
        @include button(backdrop-active);
      }
      &:insensitive {
        @include button(backdrop-insensitive);
        &:active, &:checked {
          @include button(backdrop-insensitive-active);
        }
      }
    }
    &.flat:backdrop {
      background-color: backdrop(w_color(normal));
      color: backdrop(w_color(text));
      border-color: transparent;
    }
    &:insensitive {
      @include button(insensitive);
      &:active, &:checked { @include button(insensitive-active); }
    }
  }
}

// transition
.list-row, list-row.button {
  transition: all 300ms $ease-out-quad;
  &:hover { transition: none; }
}
