@import "./../variable.scss";
@mixin promptInputer ($color) {
  .prompt-content > textarea,
  .prompt-content > .hx-input  {
    &:focus {
      border: 1px solid $color;
    }
  }
  .prompt-content > .inputer-number  {
    &:focus {
      border-bottom: 1px solid $color;
    }
  }
}
.hx-modal.confirm {
  .content {
    .header, .footer { 
      margin: 0;
    }
  }
  .inputer-number {
    font-size: 35px;
    line-height: 35px;
    width: 100%;
    padding: $pm-lg $pm-sm;
    border: none;
    text-align: center;
    margin-bottom: $pm-md;
    &::placeholder {
      font-size: 20px;
      line-height: 35px;
      height: 35px;
    }
  }
  .hx-input {
    width: 100%;
  }
  &.info, &.default, &.blue { @include promptInputer($color-blue); } 
  &.success { @include promptInputer($color-green); } 
  &.warn { @include promptInputer($color-orange); } 
  &.error { @include promptInputer($color-red); } 
  &.fatal { @include promptInputer($color-black); } 
}

// 桌面端样式
@media screen and (min-width: 640px) {
  .hx-modal.confirm {
    .content {
      width: 400px!important;
      text-align: justify;
      color: $color-dark;
      border-radius: $pm-sm;
      & > .header {
        font-size: $font-md;
        margin-bottom: $pm-md;
      }
      .confirm-content {
        padding: $pm-bg $pm-md $pm-bg;
        text-align: center;
        font-size: $font-bg;
      }
      .alert-content {
        padding: $pm-bg*2 $pm-md $pm-md;
        font-size: $font-bg;
        font-weight: 500;
        text-align: center;
        word-break: break-all;
      }
      .prompt-content {
        padding: 0 $pm-md $pm-sm;
        .tips {
          font-size: $font-md;
          color: #aaa;
        }
        .inputer-number {
          border-bottom: 1px solid $color-gray;
        }
      }
      .footer {
        text-align: right;
        margin: $pm-md;
        .hx-button {
          min-width: $height-navbar * 1.5;
        }
        .hx-button + .hx-button {
          margin-left: $pm-sm;
        }
      }
    }
  }
}

// 移动版样式
@media screen and (max-width: 640px) {
  /* 自下而上弹出样式已迁移到 hx-modal.scss 中 */
  .hx-modal.confirm {
    & > .content {
      overflow: hidden;
      color: $color-heavy;
      font-size: $font-bg;
      height: auto;
      width: 100%;
      padding-top: 0!important;
      top: unset;
      left: 0;
      bottom: 0;
      transform: translateY(100%);
      transition: transform .4s;
      @include borderRadiusTop($md);
      & > .header {
        font-weight: 600;
        font-size: $font-bg;
        text-align: center;
        line-height: $height-navbar;
        height: $height-navbar;
        display: block;
        border-bottom: 1px solid $color-gray;
        padding-left: 0;
        &::before {
          width: 20%;
          top: 0;
          @include centerHorizontal;
          height: $sm / 2;
          border-radius: $sm / 2;
        }
      }
      .confirm-content {
        display: block;
        position: relative;
        text-align: center;
        font-size: $font-bg;
        line-height: 24px; 
        padding: $bg*2 $md;
      }
      .alert-content {
        padding: $lg*1.5 $md;
        font-size: $font-bg;
        font-weight: 500;
        text-align: center;
        line-height: 1.8;
        word-break: break-all;
        & + .footer {
          justify-content: center;
          .btn-confirm {
            width: 50%;
            flex: none;
          }
        }
      }
      .prompt-content {
        padding: $lg $md;
        textarea {
          box-shadow: none;
          display: block;
        }
        .tips {
          font-size: $font-md;
          color: #aaa;
          padding: $sm;
        }
        .inputer-number {
          border-bottom: none;
        }
      }
      .footer {
        font-size: 12px;
        display: flex;
        margin-top: 0;
        padding: 0 $md $md;
        .btn-confirm, .btn-cancel {
          border: none;
          border-radius: $sm;
          height: $height-normal;
          flex: 1;
          margin: 0;
        }
        .btn-cancel {
          background-color: $color-gray-light;
          margin-right: $md;
        }
      }
    }
    &.show > .content {
      transform: translateY(0);
    }
  }
}