@mixin cl-area-visibility($area, $what, $target: $area) {
  .cl-#{$area}-#{$what} > .cl-#{$target} {
    @content
  }
}

@mixin cl-responsive-hidden($hidden-size) {
  @include cl-area-visibility('header', $hidden-size) {
    display: none !important;
  }
  @include cl-area-visibility('footer', $hidden-size) {
    display: none !important;
  }

  @include cl-area-visibility('header', $hidden-size, 'contents') {
    top: 0;
  }
  @include cl-area-visibility('footer', $hidden-size, 'contents') {
    bottom: 0;
  }
}

@mixin cl-responsive-visible($visible-size, $header-height, $footer-height) {

  @include cl-area-visibility('header', $visible-size) {
    display: block !important;
  }
  @include cl-area-visibility('footer', $visible-size) {
    display: block !important;
  }

  @include cl-area-visibility('header', $visible-size, 'contents') {
    top: $header-height;
  }
  @include cl-area-visibility('footer', $visible-size, 'contents') {
    bottom: $footer-height;
  }
}

@function cl-generate-visibility-selectors($area, $visibility, $sizes) {
  $selectors: ();
  @each $size in $sizes {
    $selectors: join($selectors,
            unquote('.cl-#{$area}-#{$visibility}-#{$size}'), comma);
  }
  @return $selectors;
}

@mixin default-invisible($sizes) {
  $header-selectors: cl-generate-visibility-selectors(header, visible, $sizes);
  $footer-selectors: cl-generate-visibility-selectors(footer, visible, $sizes);

  #{$header-selectors} {
    > .cl-header {
      display: none !important;
    }
  }
  #{$footer-selectors} {
    > .cl-footer {
      display: none !important;
    }
  }

  #{$header-selectors} {
    > .cl-contents {
      top: 0;
    }
  }
  #{$footer-selectors} {
    > .cl-contents {
      bottom: 0;
    }
  }
}

@include default-invisible($cl-responsive-sizes);
#cl-modal-box {
  @include default-invisible($cl-responsive-sizes);
}

@mixin cl-responsive-visible-hidden-pair($header-height, $footer-height,
$modal-header-height, $modal-footer-height, $size) {
  @include cl-responsive-visible('visible',
          $header-height, $footer-height);
  @include cl-responsive-visible('visible-#{$size}',
          $header-height, $footer-height);
  @include cl-responsive-hidden('hidden');
  @include cl-responsive-hidden('hidden-#{$size}');

  #cl-modal-box {
    @include cl-responsive-visible('visible',
            $modal-header-height, $modal-footer-height);
    @include cl-responsive-visible('visible-#{$size}',
            $modal-header-height, $modal-footer-height);
    @include cl-responsive-hidden('hidden');
    @include cl-responsive-hidden('hidden-#{$size}');
  }
}

@media (max-width: $cl-screen-xs-max) {
  @include cl-responsive-visible-hidden-pair(
          $cl-header-height-xs,
          $cl-footer-height-xs,
          $cl-modal-header-height-xs,
          $cl-modal-footer-height-xs,
          xs);
}

@media (min-width: $cl-screen-sm-min) and (max-width: $cl-screen-sm-max) {
  @include cl-responsive-visible-hidden-pair(
          $cl-header-height-sm,
          $cl-footer-height-sm,
          $cl-modal-header-height-sm,
          $cl-modal-footer-height-sm,
          sm);
}

@media (min-width: $cl-screen-md-min) and (max-width: $cl-screen-md-max) {
  @include cl-responsive-visible-hidden-pair(
          $cl-header-height-md,
          $cl-footer-height-md,
          $cl-modal-header-height-md,
          $cl-modal-footer-height-md,
          md);
}

@media (min-width: $cl-screen-lg-min) {
  @include cl-responsive-visible-hidden-pair(
          $cl-header-height-lg,
          $cl-footer-height-lg,
          $cl-modal-header-height-lg,
          $cl-modal-footer-height-lg,
          lg);
}