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

.bloko-gap {
    margin: 0;
}

/* Средний вариант страницы: 12 колонок, от 1020px до 1339px (вариант по умолчанию) */
.bloko-gap_top,
.bloko-gap_m-top {
    margin-top: @vertical-indent;
}

.bloko-gap_right,
.bloko-gap_m-right {
    margin-right: @horizontal-indent;
}

.bloko-gap_bottom,
.bloko-gap_m-bottom {
    margin-bottom: @vertical-indent;
}

.bloko-gap_left,
.bloko-gap_m-left {
    margin-left: @horizontal-indent;
}

/* Узкий вариант страницы до 1019px */
@media @screen-lt-m {
    :global(.s-friendly),
    :global(.xs-friendly) {
        .bloko-gap {
            margin: 0;
        }

        .bloko-gap_top,
        .bloko-gap_s-top {
            margin-top: @vertical-indent;
        }

        .bloko-gap_right,
        .bloko-gap_s-right {
            margin-right: @horizontal-indent;
        }

        .bloko-gap_bottom,
        .bloko-gap_s-bottom {
            margin-bottom: @vertical-indent;
        }

        .bloko-gap_left,
        .bloko-gap_s-left {
            margin-left: @horizontal-indent;
        }
    }
}

/* Вариант страницы для мобильных устройств до 699px */
@media @screen-lt-s {
    :global(.xs-friendly) {
        .bloko-gap {
            margin: 0;
        }

        .bloko-gap_top,
        .bloko-gap_xs-top {
            margin-top: @vertical-indent;
        }

        .bloko-gap_right,
        .bloko-gap_xs-right {
            margin-right: @horizontal-indent;
        }

        .bloko-gap_bottom,
        .bloko-gap_xs-bottom {
            margin-bottom: @vertical-indent;
        }

        .bloko-gap_left,
        .bloko-gap_xs-left {
            margin-left: @horizontal-indent;
        }
    }
}

/* Широкий вариант страницы от 1340px */
@media @screen-gt-m {
    .bloko-gap {
        margin: 0;
    }

    .bloko-gap_top,
    .bloko-gap_l-top {
        margin-top: @vertical-indent;
    }

    .bloko-gap_right,
    .bloko-gap_l-right {
        margin-right: @horizontal-indent;
    }

    .bloko-gap_bottom,
    .bloko-gap_l-bottom {
        margin-bottom: @vertical-indent;
    }

    .bloko-gap_left,
    .bloko-gap_l-left {
        margin-left: @horizontal-indent;
    }
}