@import './theme/default';
@import './theme/font';

$z-index: 1050;

$vertical-padding: 56px * 2;
$horizontal-padding: 28px * 2;

$min-height: 190px;
$min-width: 560px;

// all includes padding to dialog body
$header-height: 72px;
$footer-height: 72px;

/*
  WARNING: Do NOT use transform: translate(-50%, -50%) to center dialog,
  it makes content blurry.

  With GPU rendering elements we are translating, their sizes must be
  even numbers.

  The bad news is that we cannot control the size of dialogs.

  http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d

  Here we're using inline-blocks to center the dialog.

  https://css-tricks.com/centering-in-the-unknown/
*/
.zent-dialog-r-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index;
  outline: 0;
  text-align: center;
  font-size: 0;
  white-space: nowrap;

  &::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle; // required
  }
}

.zent-dialog-r {
  @include theme-color(background-color, stroke, 9);
  position: relative;
  display: inline-block;
  vertical-align: middle; // required
  text-align: initial;
  border-radius: 4px;
  padding: 16px 0;
  box-sizing: border-box;
  white-space: normal;
  min-width: $min-width;
  max-width: calc(100vw - #{$horizontal-padding});
  min-height: $min-height;
  max-height: calc(100vh - #{$vertical-padding});
}

.zent-dialog-r-title {
  @include font-large;
  @include theme-color(border-bottom-color, stroke, 5);
  @include theme-color(color, stroke, 1);
  padding: 0 16px 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin: 0;
  box-sizing: border-box;
  font-weight: $font-weight-medium;
}

.zent-dialog-r-close {
  @include theme-color(color, stroke, 1);
  @include theme-color(background-color, stroke, 9);
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 10px;
  font-size: 20px;
  line-height: 20px;
  text-align: right;
  vertical-align: middle;
  cursor: pointer;
  border: 0;
  outline: none;
  user-select: none;
  padding: 0 0 0 6px;
  margin: 0;

  &:link,
  &:active,
  &:focus {
    @include theme-color(color, stroke, 1);
  }

  &.zent-dialog-r-has-title {
    top: 18px;
    right: 16px;
  }
}

.zent-dialog-r-body {
  @include font-normal;
  @include theme-color(color, stroke, 1);

  padding-top: 16px;

  &.with-success-icon,
  &.with-warning-icon {
    padding-left: 30px;
  }

  &:last-child {
    padding-bottom: 0;
  }

  &-content {
    padding: 0 16px;
    overflow-y: auto;
  }
}

/*
We need to consider only two cases if header is present, close button has no impact on style
Header  CloseButton  Footer
O       O            O
O       O            X
O       X            O
O       X            X

We need to consider four cases if header is not present, this time close button has impact on style
X       O            O
X       O            X
X       X            O
X       X            X
*/

// no header and has close button
.zent-dialog-r {
  // only content
  .zent-dialog-r-body-content {
    min-height: $min-height - 48px;
    max-height: calc(100vh - #{$vertical-padding + 48px});
  }

  &.zent-dialog-r--has-footer .zent-dialog-r-body-content {
    min-height: $min-height - $footer-height - 32px;
    max-height: calc(100vh - #{$vertical-padding + $footer-height + 32px});
  }
}

// no header and no close button
.zent-dialog-r.zent-dialog-r--no-close-btn:not(.zent-dialog-r--has-header) {
  .zent-dialog-r-body {
    padding-top: 0;
  }

  // only content
  .zent-dialog-r-body-content {
    min-height: $min-height - 32px;
    max-height: calc(100vh - #{$vertical-padding + 32px});
  }

  &.zent-dialog-r--has-footer .zent-dialog-r-body-content {
    min-height: $min-height - $footer-height - 16px;
    max-height: calc(100vh - #{$vertical-padding + $footer-height + 16px});
  }
}

// has header, close button doesn't matter
.zent-dialog-r.zent-dialog-r--has-header {
  // no footer
  .zent-dialog-r-body-content {
    min-height: $min-height - $header-height - 16px;
    max-height: calc(100vh - #{$vertical-padding + $header-height + 16px});
  }

  // has footer
  &.zent-dialog-r--has-footer .zent-dialog-r-body-content {
    min-height: $min-height - $header-height - $footer-height;
    max-height: calc(
      100vh - #{$vertical-padding + $header-height + $footer-height}
    );
  }
}

.zent-dialog-r-footer {
  text-align: right;
  padding: 24px 16px 0;

  .zent-btn + .zent-btn {
    margin-left: 8px;
  }
}

.zent-dialog-r-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba($color-black, 0.6);
  height: 100%;
  z-index: $z-index;
}