@mixin header($height:$header-xs-height, $padding:$basic-padding){
  @include border-bottom();
  height: $height;
  padding: 0 $padding / 2;
  transition: all ease $slow;

  &.hidden{ margin-top:-$height; }
  &.grey{ background-color: $alpha-black-light; }
  &.red{
    background-color: $color-error-light;
    border-color: $color-error-medium !important;
    color: $color-error;
  }

  @include mq($from: sm) {
    padding: 0 $padding;
    height: $header-height;
  }
}

nts-header {

  header{
    @include header();
  }
  header.medium{
    @include header($header-xs-height);

    @include mq($from: sm) {
      height: $header-md-height;
    }
  }
  &.less-padding{
    header{
      padding: 0 $basic-padding/2;
    }
  }
}