@import url(../var.less);

@breakpoints-spec: {
  xs-only : ~"only screen and (max-width: @{screen-xs-max})";
  sm-and-up : ~"only screen and (min-width: @{sm})";
  sm-only: ~"only screen and (min-width: @{sm}) and (max-width: @{screen-sm-max})";
  sm-and-down: ~"only screen and (max-width: @{screen-sm-max})";
  md-and-up : ~"only screen and (min-width: @{md})";
  md-only: ~"only screen and (min-width: @{md}) and (max-width: @{screen-md-max})";
  md-and-down: ~"only screen and (max-width: @{screen-md-max})";
  lg-and-up : ~"only screen and (min-width: @{lg})";
  lg-only: ~"only screen and (min-width: @{lg}) and (max-width: @{screen-lg-max})";
  lg-and-down: ~"only screen and (max-width: @{screen-lg-max})";
  xl-and-up: ~"only screen and (min-width: @{xl})";
  xl-only: ~"only screen and (min-width: @{xl}) and (max-width: @{screen-xl-max})";
  xl-only-down: ~"only screen and (max-width: @{screen-xl-max})";
  xxl-only: ~"only screen and (min-width: @{xxl})";
};

.w-hidden {
  each(@breakpoints-spec, {
    &-@{key} {
      @media @value {
        display: none!important;
      }
    }
  })
}