@import "./mixins/border_retina.pcss";

@component-namespace z {
  @component dialog-wrapper {
    position: absolute;
  }

  @component dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: #fff;
    width: 85%;
    border-radius: 4px;
    font-size: 16px;
    overflow: hidden;
    backface-visibility: hidden;
    transition: .2s;

    @descendent header {
      padding: 15px 0 0;
    }

    @descendent content {
      padding: 15px 20px;
      min-height: 36px;
      position: relative;

      &::after {
        @mixin border-retina (bottom);
      }
    }

    @descendent title {
      text-align: center;
      padding-left: 0;
      margin-bottom: 0;
      font-size: 16px;
      color: #333;
    }

    @descendent message {
      color: #999;
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
    }

    @descendent footer {
      font-size: 14px;
      overflow: hidden;
    }

    .is-twobtn {
      .z-dialog-btn {
        width: 50%;
      }

      .z-dialog-cancel {
        &::after {
          @mixin border-retina (right);
        }
      }
    }

    @descendent btn {
      line-height: 40px;
      border: 0;
      background-color: #fff;
      float: left;
      box-sizing: border-box;
      text-align: center;
      position: relative;
    }

    @descendent cancel {
      color: #333;
    }

    @descendent confirm {
      color: #00C000;
      width: 100%;
    }
  }
}

.dialog-bounce-enter {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
}
.dialog-bounce-leave-active {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
}