//**********************************************************
// size constants
//**********************************************************
@listview-item-font-size: 12px;
@listview-icon-item-caption-max-height: 50px;

// "small icons"
@listview-icon-small-item-spacing: 1px;
@listview-icon-small-item-padding: 2px;
@listview-icon-small-item-width: 250px;
@listview-icon-small-icon-size: 22px;

// "medium icons"
@listview-icon-medium-item-spacing: 4px;
@listview-icon-medium-item-padding: 4px;
@listview-icon-medium-item-width: 100px;
@listview-icon-medium-icon-size: 60px;

// "large icons"
@listview-icon-large-item-spacing: 4px;
@listview-icon-large-item-padding: 4px;
@listview-icon-large-item-width: 160px;
@listview-icon-large-icon-size: 120px;

// "tiles"
@listview-icon-tile-item-spacing: 1px;
@listview-icon-tile-item-padding: 4px;
@listview-icon-tile-item-width: @listview-icon-small-item-width;
@listview-icon-tile-icon-size: @listview-icon-medium-icon-size;

// "table"
@listview-table-item-padding: 2px;
@listview-table-icon-size: 32px;

//**********************************************************
// common functions
//**********************************************************
.border-debug (@color: red) when (@debug-border) {
  border: 1px solid @color;
}

.border (@bold, @style, @color) when not (@debug-border) {
  border: @bold @style @color;
}

.rounded-corners (@radius: 4px) {
  border-radius: @radius;
}

.icon-display (@size, @max-width: 0, @display: none) when (@size = 0) {
  display: none;
}

.icon-display (@size, @max-width, @display: block) when not (@size = 0) {
  display: @display;
  width: @max-width;    // may be changed to { min-width: @size; max-width: @max-width; } due to images support
  height: @size;
  .border-debug();
}

//**********************************************************
// base list template
//**********************************************************
.ul-list () {
  list-style-type: none;
  margin: 0;
  cursor: default;
  .border-debug(green);
}

.ul-list-spacing (@value) {
  padding: @value 0px 0px @value;
}

.li-list () {
  overflow: hidden;
  .user-select;
  .border(1px, solid, transparent);
  .border-debug(blue);
}

.li-list-spacing (@value) {
  margin: 0px @value @value 0px;
}

.li-list-panel (@width, @height: -1) when (@height = -1) {
   width: @width;
}

.li-list-panel (@width, @height: -1) when not (@height = -1) {
   width: @width;
   height: @height;
}

//**********************************************************
// "icons" list
//**********************************************************
.w2ui-listview {
  overflow: auto !important;
  background-color: @listview-background-color !important;
  .box-sizing(border-box);

  * {
    .box-sizing;
  }

  > ul {
    .ul-list;

    > li {
      display: inline-block;
      vertical-align: top;
      .li-list;
      .rounded-corners;

      &.w2ui-focused {
        .border(1px, solid, @listview-item-border-selection-color);
        .border-debug(black);
      }

      &.w2ui-selected {
        .border(1px, solid, @listview-item-border-selection-color);
        .border-debug(black);
      }

      &.w2ui-selected,
      &.w2ui-selected.hover {
        .linear-gradient-vertical(@listview-item-selected-linear-gradient-start, @listview-item-selected-linear-gradient-end);

        > div {
          > div.caption {
            color: @listview-item-selected-color;
          }

          > div.description {
            color: @listview-item-selected-second-color;
          }

          > div.extra > div > div {
            color: @listview-item-selected-second-color;
          }
        }
      }

      &.hover {
        .linear-gradient-vertical(@listview-item-hover-background-color-start, @listview-item-hover-background-color-end);
        .border(1px, solid, @listview-item-border-selection-color);
        .border-debug(black);
      }

      div {
        vertical-align: middle;
      }

      > div {
        > div.caption {
          display: block;
          text-align: center;
          word-wrap: break-word;
          max-height: @listview-icon-item-caption-max-height;
          color: @listview-item-color;
          font-size: @listview-item-font-size;
          .border-debug(gray);
        }

        > div.description {
          display: none;
          text-align: left;
          color: @listview-item-second-color;
          font-size: @listview-item-font-size;
          .border-debug(lightgray);
        }

        > div.extra {
          display: none;

          > div > div {
            color: @listview-item-second-color;
          }
        }
      }
    }
  }
}

//**********************************************************
// "small icons" list
//**********************************************************
.w2ui-icon-small > ul {
  .ul-list-spacing(@listview-icon-small-item-spacing);

  > li {
    .li-list-spacing(@listview-icon-small-item-spacing);
    padding: @listview-icon-small-item-padding;
    .li-list-panel(@listview-icon-small-item-width);
    white-space: nowrap;

    > div {
      > div.w2ui-listview-img {
        .icon-display(@listview-icon-small-icon-size, floor(@listview-icon-small-icon-size * 1.2), inline-block);
        font-size: ceil(@listview-icon-small-icon-size * 0.95);
        margin-right: @listview-icon-small-item-padding;
      }

      > div.caption {
        display: inline-block;
      }
    }
  }
}

//**********************************************************
// "medium icons" list
//**********************************************************
.w2ui-icon-medium > ul {
  .ul-list-spacing(@listview-icon-medium-item-spacing);

  > li {
    .li-list-spacing(@listview-icon-medium-item-spacing);
    padding: @listview-icon-medium-item-padding;
    .li-list-panel(@listview-icon-medium-item-width);

    > div > div.w2ui-listview-img {
      .icon-display(@listview-icon-medium-icon-size, @listview-icon-medium-item-width - (@listview-icon-medium-item-padding * 2));
      font-size: ceil(@listview-icon-medium-icon-size * 0.95);
      margin-left: auto;
      margin-right: auto;
      background-position: center;
    }
  }
}

//**********************************************************
// "large icons" list
//**********************************************************
.w2ui-icon-large > ul {
  .ul-list-spacing(@listview-icon-large-item-spacing);

  > li {
    .li-list-spacing(@listview-icon-large-item-spacing);
    padding: @listview-icon-large-item-padding;
    .li-list-panel(@listview-icon-large-item-width);

    > div > div.w2ui-listview-img {
      .icon-display(@listview-icon-large-icon-size, @listview-icon-large-item-width - (@listview-icon-large-item-padding * 2));
      font-size: ceil(@listview-icon-large-icon-size * 0.95);
      margin-left: auto;
      margin-right: auto;
      background-position: center;
    }
  }
}

//**********************************************************
// "tiles" list
//**********************************************************
.w2ui-icon-tile > ul {
  .ul-list-spacing(@listview-icon-tile-item-spacing);

  > li {
    .li-list-spacing(@listview-icon-tile-item-spacing);
    padding: @listview-icon-tile-item-padding;
    .li-list-panel(@listview-icon-tile-item-width);
    white-space: nowrap;

    > div {
      > div.w2ui-listview-img {
        .icon-display(@listview-icon-tile-icon-size, floor(@listview-icon-tile-icon-size * 1.2), inline-block);
        font-size: ceil(@listview-icon-tile-icon-size * 0.95);
        float: left;
        margin-right: @listview-icon-tile-item-padding;
      }

      > div.caption {
        text-align: left;
      }

      > div.description {
        display: block;
      }
    }
  }
}


//**********************************************************
// "table" list
//**********************************************************
.w2ui-table > ul {
  padding: 0;

  > li {
    width: 100%;
    padding: @listview-table-item-padding;
    border-radius: 0px;
    border-bottom: 1px dotted lightgray;

    > div {
      display: inline-block;
      position: relative;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;

      > div.w2ui-listview-img {
        .icon-display(@listview-table-icon-size, floor(@listview-table-icon-size * 1.2), inline-block);
        font-size: ceil(@listview-table-icon-size * 0.95);
        margin-right: @listview-table-item-padding;
      }

      > div.caption {
        display: inline-block;
      }

      > div.extra {
        display: inline-block;
        position: absolute;
        right: 0;
        height: 100%;
        background-color: @listview-background-color;

        > div:before {
          display: inline-block;
          height: 100%;
          width: 0;
          content: '';
          vertical-align: middle;
        }

        > div {
          display: inline;

          > div {
            display: inline-block;
            font-size: @listview-item-font-size;
          }
        }
      }
    }

    &.w2ui-selected div.extra,
    &.w2ui-selected.hover div.extra {
      .linear-gradient-vertical(@listview-item-selected-linear-gradient-start, @listview-item-selected-linear-gradient-end);
    }

    &.hover div.extra {
      .linear-gradient-vertical(@listview-item-hover-background-color-start, @listview-item-hover-background-color-end);
    }
  }
}

//**********************************************************
// "empty" icon
//**********************************************************

.w2ui-listview > ul > li div.icon-none {
  .border(1px, solid, fadeout(greyscale(@listview-item-border-selection-color), 65%));
  .border-debug();
}
