@import '../common/style/var.less';

.van-dialog {
  top: 45% !important;
  overflow: hidden;
  width: var(--dialog-width, @dialog-width);
  font-size: var(--dialog-font-size, @dialog-font-size);
  border-radius: var(--dialog-border-radius, @dialog-border-radius);
  background-color: var(--dialog-background-color, @dialog-background-color);

  @media (max-width: 321px) {
    width: var(--dialog-small-screen-width, @dialog-small-screen-width);
  }

  &__header {
    text-align: center;
    padding-top: var(--dialog-header-padding-top, @dialog-header-padding-top);
    font-weight: var(--dialog-header-font-weight, @dialog-header-font-weight);
    line-height: var(--dialog-header-line-height, @dialog-header-line-height);

    &--isolated {
      padding: var(
        --dialog-header-isolated-padding,
        @dialog-header-isolated-padding
      );
    }
  }

  &__message {
    overflow-y: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
    font-size: var(--dialog-message-font-size, @dialog-message-font-size);
    line-height: var(--dialog-message-line-height, @dialog-message-line-height);
    max-height: var(--dialog-message-max-height, @dialog-message-max-height);
    padding: var(--dialog-message-padding, @dialog-message-padding);

    &-text {
      word-wrap: break-word;
    }

    &--hasTitle {
      padding-top: var(
        --dialog-has-title-message-padding-top,
        @dialog-has-title-message-padding-top
      );
      color: var(
        --dialog-has-title-message-text-color,
        @dialog-has-title-message-text-color
      );
    }

    &--round-button {
      padding-bottom: @padding-md;
      color: @text-color;
    }

    &--left {
      text-align: left;
    }

    &--right {
      text-align: right;
    }
  }

  &__footer {
    display: flex;

    &--round-button {
      position: relative !important;
      padding: @padding-xs @padding-lg @padding-md !important;
    }
  }

  &__button {
    flex: 1;
  }

  &__confirm,
  &__cancel {
    border: 0 !important;
  }

  &-bounce-enter {
    transform: translate3d(-50%, -50%, 0) scale(0.7);
    opacity: 0;
  }

  &-bounce-leave-active {
    transform: translate3d(-50%, -50%, 0) scale(0.9);
    opacity: 0;
  }
}