@import '../../common/styles/media/_screen';
@import '../../common/styles/_column-variables';

.abstract-column(@width-multiplier) {
    width: @column-width * @width-multiplier;
}

.abstract-column-mobile(@width-multiplier) {
    width: 25% * @width-multiplier;
}

.bloko-column-print-columns(@index) when (@index > 0) {
    .bloko-column_s-@{index} {
        width: (100% * @index / 8);
    }

    .bloko-column-print-columns(@index - 1);
}

.bloko-column-print() {
    .bloko-columns-wrapper,
    :global(.xs-friendly) .bloko-columns-wrapper,
    :global(.s-friendly) .bloko-columns-wrapper {
        width: 100%;
        padding: 0;
    }

    .bloko-columns-row {
        display: table;
        width: 100%;
        vertical-align: baseline;

        .bloko-column {
            display: table-cell;
            vertical-align: baseline;
        }

        .bloko-column-print-columns(8);
    }
}

.bloko-columns-wrapper {
    margin: 0 auto;
    width: 1000px;
    padding: 0 20px;
    box-sizing: border-box;
}

.bloko-columns-row {
    display: inline-block;
    vertical-align: top;
}

.bloko-column {
    box-sizing: border-box;
    width: @column-width;
    padding: 0 @column-padding;
    display: inline-block;
    vertical-align: top;
}

.bloko-column_container {
    padding: 0;
}

/* Средний вариант страницы (по умолчанию) */
.bloko-column_m-0 {
    display: none;
}

.bloko-column_m-1 {
    .abstract-column(1);
}

.bloko-column_m-2 {
    .abstract-column(2);
}

.bloko-column_m-3 {
    .abstract-column(3);
}

.bloko-column_m-4 {
    .abstract-column(4);
}

.bloko-column_m-5 {
    .abstract-column(5);
}

.bloko-column_m-6 {
    .abstract-column(6);
}

.bloko-column_m-7 {
    .abstract-column(7);
}

.bloko-column_m-8 {
    .abstract-column(8);
}

.bloko-column_m-9 {
    .abstract-column(9);
}

.bloko-column_m-10 {
    .abstract-column(10);
}

.bloko-column_m-11 {
    .abstract-column(11);
}

.bloko-column_m-12 {
    .abstract-column(12);
}

/* Узкий вариант страницы */
@media @screen-lt-m {
    :global(.s-friendly) {
        .bloko-columns-wrapper {
            width: 680px;
        }

        .bloko-column {
            display: inline-block;
        }

        .bloko-column_s-0 {
            display: none;
        }

        .bloko-column_s-1 {
            .abstract-column(1);
        }

        .bloko-column_s-2 {
            .abstract-column(2);
        }

        .bloko-column_s-3 {
            .abstract-column(3);
        }

        .bloko-column_s-4 {
            .abstract-column(4);
        }

        .bloko-column_s-5 {
            .abstract-column(5);
        }

        .bloko-column_s-6 {
            .abstract-column(6);
        }

        .bloko-column_s-7 {
            .abstract-column(7);
        }

        .bloko-column_s-8 {
            .abstract-column(8);
        }
    }
}

/* Широкий вариант страницы */
@media @screen-gt-m {
    .bloko-columns-wrapper {
        width: 1320px;
    }

    .bloko-column {
        display: inline-block;
    }

    .bloko-column_l-0 {
        display: none;
    }

    .bloko-column_l-1 {
        .abstract-column(1);
    }

    .bloko-column_l-2 {
        .abstract-column(2);
    }

    .bloko-column_l-3 {
        .abstract-column(3);
    }

    .bloko-column_l-4 {
        .abstract-column(4);
    }

    .bloko-column_l-5 {
        .abstract-column(5);
    }

    .bloko-column_l-6 {
        .abstract-column(6);
    }

    .bloko-column_l-7 {
        .abstract-column(7);
    }

    .bloko-column_l-8 {
        .abstract-column(8);
    }

    .bloko-column_l-9 {
        .abstract-column(9);
    }

    .bloko-column_l-10 {
        .abstract-column(10);
    }

    .bloko-column_l-11 {
        .abstract-column(11);
    }

    .bloko-column_l-12 {
        .abstract-column(12);
    }

    .bloko-column_l-13 {
        .abstract-column(13);
    }

    .bloko-column_l-14 {
        .abstract-column(14);
    }

    .bloko-column_l-15 {
        .abstract-column(15);
    }

    .bloko-column_l-16 {
        .abstract-column(16);
    }
}

/* Мобильный вариант cтраницы */
@media @screen-lt-s {
    :global(.xs-friendly) .bloko-columns-wrapper {
        width: 100%;
        padding: 0;
    }

    :global(.xs-friendly) .bloko-columns-row {
        width: 100%;
    }

    :global(.xs-friendly) .bloko-column {
        display: inline-block;
    }

    :global(.xs-friendly) .bloko-column_xs-0 {
        display: none;
    }

    :global(.xs-friendly) .bloko-column_xs-1 {
        .abstract-column-mobile(1);
    }

    :global(.xs-friendly) .bloko-column_xs-2 {
        .abstract-column-mobile(2);
    }

    :global(.xs-friendly) .bloko-column_xs-3 {
        .abstract-column-mobile(3);
    }

    :global(.xs-friendly) .bloko-column_xs-4 {
        .abstract-column-mobile(4);
    }
}

@media print {
    .bloko-column-print();
}

.bloko-print {
    .bloko-column-print();
}