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

$z-index: 1050;

/*
  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;
  background: #fff;
}

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

.zent-dialog-r-close {
  @include theme-color(color, stroke, 2);
  background-color: #fff;
  // @include theme-color(background-color, stroke, 9);
  position: absolute;
  display: inline-block;
  top: 4px;
  right: 10px;
  font-size: 18px;
  line-height: 18px;
  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, 2);
  }

  &.zent-dialog-r-has-title {
    top: 14px;
    right: 12px;
  }
}

.zent-dialog-r-body {
  @include font-normal;
  @include theme-color(color, stroke, 1);
  padding: 0 16px 16px 16px;

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

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

.zent-dialog-r-footer {
  text-align: right;
  padding: 16px 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(black, 0.6);
  height: 100%;
  z-index: $z-index;
}