@gridblock_height: 500px;
@gridblock_width: 800px;
@gridblock_width_small:400px;
@grid_margin:10px;
@grey-light:#dedede;

.zrdn-grid {
    margin-left: 25px;
    position: relative;

    .zrdn-item {
        width: @gridblock_width;
        &.small {
            width: @gridblock_width_small;

        }
        position: absolute;
        height: @gridblock_height;
        z-index: 1;

        &.muuri-item-hidden {
            z-index: 0;
        }
        &.muuri-item-releasing {
            z-index: 2;
        }
        &.muuri-item-dragging {
            z-index: 3;
        }
        .zrdn-grid-header {
            cursor: pointer;
            padding: 0;
            height:60px;

            .zrdn-grid-header-container {
                margin:0;
                border-bottom: 1px solid @grey-light;
                height:100%;
            }

            .zrdn-grid-title{
                font-size: 1.2em;
                padding: 26px 30px 0;
                font-weight: bold;
                float: left;
            }
            .zrdn-grid-controls {
                float: right;
                margin-top: 20px;
            }

        }
        .item-container {
            background-color: #fff;
            position: relative;
            box-shadow: 0px 0px 5px 5px rgba(222, 222, 222, 0.2);
            width: @gridblock_width - 2* @grid_margin;
            height: @gridblock_height - 2 * @grid_margin;
            .item-content {
                clear:both;
                margin:0 20px;
                height: calc(100% - 100px);
                padding-top: 15px;
                padding-bottom:10px;
            }

        }
        &.half-height {
            .item-container {
                height: @gridblock_height / 2;
            }
        }
        &.small {
            .item-container {
                width: @gridblock_width_small - 2* @grid_margin;
            }
        }
        &.no-border {
            .item-container {
                border: none;
            }
        }
        &.no-background {
            .item-container {
                background-color: #F1F1F1;
            }
        }
        &.muuri-item-dragging .item-content {
        }
        &.muuri-item-releasing .item-content {
        }

        &.muuri-item-placeholder {
        }

        &.muuri-item-placeholder .item-container {
            border-style: dashed;
            padding:0;
        }

    }
    .upsell-grid-container {
        .item-container {
                box-shadow: none;
        }
    }
}