#cl-modal-overlay {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $cl-modal-z-index;
  background-color: $cl-modal-overlay-color;
  pointer-events: none;
}

#cl-modal-box {
  position: absolute;
  background-color: $cl-modal-box-bg-color;
  pointer-events: auto;

  @media (max-width: $cl-screen-xs-max) {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  @media (min-width: $cl-screen-sm-min) {
    // Center left-right and top-bottom.
    left: 50%;
    top: 50%;
    // The following, alternative method didn't work in Safari:
    //transform: translate(-50%, -50%);
  }
}

@mixin cl-modal-header-footer-heights($header-height, $footer-height) {
  #cl-modal {
    .cl-header {
      height: $header-height;
    }
    .cl-contents {
      top: $header-height;
      bottom: $footer-height;
    }
    .cl-footer {
      height: $footer-height;
    }
  }
}

#cl-modal {
  .cl-header, .cl-footer {
    z-index: $cl-modal-header-z-index;
  }
}

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

.iscroll-off {
  #cl-modal {
    .cl-header, .cl-contents, .cl-footer {
      position: absolute;
    }
    .cl-header, .cl-footer {
      overflow: hidden;
    }
    .cl-contents {
      overflow: auto;
    }
  }
}

@mixin cl-modal-box-size-def($size, $width, $height) {
  #cl-modal-box.cl-modal-#{$size} {
    width: $width;
    @media (max-height: $height - 1) {
      height: $cl-modal-box-higher-than-window-height;
      margin: 0 0 0 (- $width * 0.5);
      transform: translate(0, -50%);
    }
    @media (min-height: $height) {
      height: $height;
      margin: (- $height * 0.5) 0 0 (- $width * 0.5);
    }
  }
}

@mixin cl-modal-box-def($size, $box-sizes) {
  @each $box-size, $dimensions in $box-sizes {
    @include cl-modal-box-size-def(
            $box-size,
            map-get($dimensions, width),
            map-get($dimensions, height)
    );
  }
}

@media (min-width: $cl-screen-sm-min) and (max-width: $cl-screen-sm-max) {
  @include cl-modal-box-def(sm, (
          small: (
                  width: $cl-modal-box-small-width-sm,
                  height: $cl-modal-box-small-height-sm
          ),
          medium: (
                  width: $cl-modal-box-medium-width-sm,
                  height: $cl-modal-box-medium-height-sm
          ),
          large: (
                  width: $cl-modal-box-large-width-sm,
                  height: $cl-modal-box-large-height-sm
          )
  ));
  @include cl-modal-header-footer-heights(
          $cl-modal-header-height-sm,
          $cl-modal-footer-height-sm);
}

@media (min-width: $cl-screen-md-min) and (max-width: $cl-screen-md-max) {
  @include cl-modal-box-def(md, (
          small: (
                  width: $cl-modal-box-small-width-md,
                  height: $cl-modal-box-small-height-md
          ),
          medium: (
                  width: $cl-modal-box-medium-width-md,
                  height: $cl-modal-box-medium-height-md
          ),
          large: (
                  width: $cl-modal-box-large-width-md,
                  height: $cl-modal-box-large-height-md
          )
  ));
  @include cl-modal-header-footer-heights(
          $cl-modal-header-height-md,
          $cl-modal-footer-height-md);
}

@media (min-width: $cl-screen-lg-min) {
  @include cl-modal-box-def(lg, (
          small: (
                  width: $cl-modal-box-small-width-lg,
                  height: $cl-modal-box-small-height-lg
          ),
          medium: (
                  width: $cl-modal-box-medium-width-lg,
                  height: $cl-modal-box-medium-height-lg
          ),
          large: (
                  width: $cl-modal-box-large-width-lg,
                  height: $cl-modal-box-large-height-lg
          )
  ));
  @include cl-modal-header-footer-heights(
          $cl-modal-header-height-lg,
          $cl-modal-footer-height-lg);
}