@import '../../common/style/common.less';
@import '../../common/style/animation.less';
@import '../../common/style/hairline.less';

.hanzo-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    overflow: hidden;
    width: @dialog-width;
    font-size: @dialog-font-size;
    transition: @dialog-transition;
    border-radius: @dialog-border-radius;
    background-color: @dialog-background-color;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden; // avoid blurry text after scale animation
  
    &__header {
      text-align: center;
      font-weight: @dialog-header-font-weight;
      padding-top: @dialog-header-padding-top;
  
      &--isolated {
        padding: @dialog-header-isolated-padding;
      }
    }
  
    &__message {
      padding: @dialog-message-padding;
      font-size: @dialog-message-font-size;
      line-height: @dialog-message-line-height;
      max-height: @dialog-message-max-height;
      overflow-y: auto;
      text-align: center;
      -webkit-overflow-scrolling: touch;
  
      // allow newline charactor
      white-space: pre-wrap;
  
      &--has-title {
        color: @dialog-has-title-message-text-color;
        padding-top: @dialog-has-title-message-padding-top;
      }
  
      &--left {
        text-align: left;
      }
  
      &--right {
        text-align: right;
      }
    }
  
    &__footer {
      overflow: hidden;
      user-select: none;
  
      &--buttons {
        display: flex;
  
        .hanzo-button {
          flex: 1;
        }
      }
    }
  
    .hanzo-button {
      border: 0;
    }
  
    &__confirm {
      &,
      &:active {
        color: @dialog-confirm-button-text-color;
      }
    }
  
    &-bounce-enter {
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(0.7);
    }
  
    &-bounce-leave-active {
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(0.9);
    }
  }