.view-grid-sized(@size) {

    li {

        &.item {

            a, a:active, a:visited {
                width: @size + 182px;
                height: @size + 14px;
            }

            .label, .date, .size {
                padding: ((@size - 4px)/2) 8px;
            }
        }

        .icon.square {
            width: @size;

            img {
                width: @size;
                height: @size;
            }
        }

        .label {
            margin: 0 0 0 (@size + 8px);
        }
    }
}


#view.view-grid {

    margin: 8px;

    li {

        &.item {
            float: left;
            margin: 8px;
            background: #fff;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);

            a, a:active, a:visited {
                border: 1px solid rgba(0,0,0,0);

                &:hover, &.hover {
                    border-color: @item-border-col-hover;
                }
            }

            // needs to be here, to not conflict with header fields
            .icon {
                padding: 8px;
            }
        }

        .icon.square {
            display: inline-block;
            position: absolute;
            left: 0;
        }

        .label {
            display: block;
        }

        .date, .size {
            display: none;
        }
    }

    .view-grid-sized(@icon-size);

    &.size-16 {
        .view-grid-sized(16px)
    }

    &.size-24 {
        .view-grid-sized(24px)
    }

    &.size-32 {
        .view-grid-sized(32px)
    }

    &.size-48 {
        .view-grid-sized(48px)
    }

    &.size-64 {
        .view-grid-sized(64px)
    }

    &.size-96 {
        .view-grid-sized(96px)
    }

    &.size-128 {
        .view-grid-sized(128px)
    }

    &.size-192 {
        .view-grid-sized(192px)
    }

    &.size-256 {
        .view-grid-sized(256px)
    }

    &.size-384 {
        .view-grid-sized(384px)
    }
}