/**
* 响应式类，控制元素的显示隐藏
**/
@import (reference) "../var.less";

@xs-only: e('max-width: @{sm}');
@sm-and-up: e('min-width: @{sm}');
@sm-only: e('min-width: @{sm}) and (max-width: @{md}');
@sm-and-down: e('max-width: @{md}');
@md-and-up: e('min-width: @{md}');
@md-only: e('min-width: @{md}) and (max-width: @{lg}');
@md-and-down: e('max-width: @{lg}');
@lg-and-up: e('min-width: @{lg}');
@lg-only: e('min-width: @{lg}) and (max-width: @{xl}');
@lg-and-down: e('max-width: @{xl}');
@xl-only: e('min-width: @{xl}');


@hide-array: xs-only, sm-and-up, sm-only, sm-and-down, md-and-up, md-only, md-and-down, lg-and-up, lg-only, lg-and-down, xl-only;

.hide(@i: 1) when(@i <= length(@hide-array)) {
    @name: extract(@hide-array, @i);
    .hidden-@{name} {
      @media screen and (@@name) {
        display: none !important;
      }
    }
    .hide((@i + 1));
}
.hide();