@import './mixins/border_retina.css';
@import './popup.css';

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

  @b 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;

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

    @e content {
      padding: 15px 20px;
      position: relative;

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

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

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

      @m notitle {
        color: #333;
        font-size: 16px;
      }
    }

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

      @when twobtn {
        .van-dialog__btn {
          width: 50%;
        }

        .van-dialog__cancel {
          &::after {
            @mixin border-retina (right);
          }
        }
      }
    }

    @e btn {
      font-size: 16px;
      line-height: 52px;
      border: 0;
      padding: 0;
      background-color: #fff;
      float: left;
      box-sizing: border-box;
      text-align: center;
      position: relative;
    }

    @e cancel {
      color: #333;
    }

    @e 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);
}