@import "./../variable.scss";
@mixin levelStyle($value) {
  &>.content{
    .header {
      color: $value;
      &::before {
        background-color: $value;
      }
    }
    .footer>.hx-button.main {
      background-color: $value;
      border-color: $value;
    }
  }
}
/*
   模态框样式
   .hx-modal 为普通模态框
   两者均需要添加 show 伪类进行展示
  */
.hx-modal {
  z-index: 100;
  visibility: hidden;
  opacity: .0;
  @include block;
  position: fixed;
  transition: all .4s;
  overflow-x: hidden;
  &.show{
    visibility: visible;
    opacity: 1.0;
    &.normal>.content, &.confirm>.content, &.hx-image-modal>.content {
      transform: translate(-50%, -50%) scale(1.0, 1.0);
    }
    &.side>.content {
      transform: translateX(0);
    }
  }
  .mask {
    @include block;
    background-color: rgba(0,0,0, .65);
  }
  &.success { @include levelStyle($color-green); }
  &.info { @include levelStyle($color-blue); }
  &.error { @include levelStyle($color-red); }
  &.warn { @include levelStyle($color-orange); }
  &.fatal { @include levelStyle($color-dark); }
  
  // 缩略版模态框
  &.sm {
    & > .content {
      max-width: 500px;
      min-width: 300px;
    }
  }
  &.bg {
    & > .content {
      width: 80%;
    }
  }
  // 模态框内容版
  &>.content {
    background-color: white;
    // 模态框头部
    >.header {
      line-height: $height-normal;
      height: $height-normal;
      padding-left: $pm-md;
      margin-bottom: $pm-md;
      position: relative;
      .right {
        display: inline-block;
        float: right;
      }
      &:before {
        content: '';
        height: $height-normal/2;
        width: 3px;
        position: absolute;
        top: $height-normal/4;
        left: 0;
        display: inline-block;
        background-color: $color-main;
      }
      .pad-content {
        padding: $pm-md;
      }
    }
    // 右上角关闭模态框按钮
    .btn-close-modal {
      position: absolute;
      top: $pm-md;
      right: $pm-md;
      height: $height-regular;
      width: $height-regular;
      font-size: 18px;
      font-weight: 200;
      padding: 0;
      color: $color-gray-deep;
      background-color: transparent;
      border: none;
      border-radius: $border-radius-md;
      &:hover {
        background-color: $color-red;
        color: white;
      }
    }
    // 模态框底部
    .footer {
      text-align: center;
      margin-top: $pm-md;
      padding: $pm-md $pm-md 0;
      button {
        min-width: 100px;
      }
    }
    // 模态框中部内容面板
    .map {
      min-height: 400px;
      border-radius: $border-radius-md;
    }
    .main-textarea {
      padding: $pm-md;
      font-size: 14px;
      width: 100%;
      border: 1px solid $color-gray-light;
      border-radius: $border-radius-md;
      resize: none;
    }
  }
  &.normal>.content, &.confirm>.content {
    width: 60%; // 默认样式为屏幕宽度 60%     
    max-height: 90%;
    overflow-y: auto;                                
    min-width: 300px;
    padding: $pm-md;
    border-radius: $border-radius-md;
    box-shadow: 0 24px $pm-bg -16px rgba(0,0,0,.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.3, 1.3);
    transition: transform .4s;
  }
  // 侧边模式下的弹框
  &.side>.content {
    width: 30%;
    min-width: 300px;
    display: block;
    height: 100%;
    right: 0;
    top: 0;
    position: absolute;
    transform: none;
    max-height: 100%;
    transform: translateX(100%);
    transition: transform .4s;
    >.header {
      margin: 0;
      padding-right: $pm-md;
      border-bottom: 1px solid $color-gray;
      line-height: $height-navbar;
      height: $height-navbar;
      &:before {
        height: $height-navbar/2;
        top: $height-navbar/4;
      }
    }
    .pad-main-content {
      height: calc(100% - #{$height-normal*2 + $pm-sm} );
      width: 100%;
      display: block;
      overflow-y: auto;
      overflow-x: hidden;
      padding: $pm-md;
    }
    .footer {
      position: fixed;
      background-color: white;
      width: 100%;
      bottom: 0;
      left: 0;
      padding: $pm-sm 0;
      border-top: 1px solid $color-gray;
    }
  }  
}

@media screen and (min-width: 640px) {
  .hx-modal {
    & > .content {
      max-width: 80%;
    }
    & > .footer {
      border-top: 1px solid $color-gray;
    }
  }
}
/* ----------------------------------------------------
    移动端样式适配
 ------------------------------------------------------ */
@media screen and (max-width: 640px) {
  .hx-modal {
    z-index: 25;
    &.normal > .content {
      width: 95%;
      max-width: 90%;
      padding: $pm-sm;
      @include centerInParent;
      .btn-close-modal {
        right: $pm-sm;
        top: $pm-sm;
      }
      .header {
        font-size: $font-md;
        height: $height-regular;
        line-height: $height-regular;
        padding-left: 0;
        margin-bottom: 0;
        &:before {
          height: $height-regular/2;
          top: -2px;
          width: 28%;
          height: 6px;
          @include centerHorizontal;
          border-radius: 4px;
        }
      }
      .map {
        margin-top: $pm-sm;
      }
    }
    &.side {
      & > .content {
        width: calc(100% - #{$height-navbar});
        min-width: unset;
        max-width: unset;
      }
    }
  }

  .hx-modal.confirm, .hx-modal.actionsheet  {
    >.content {
      padding: $pm-sm;
      @include wcalc(calc(100% - 16px));
      text-align: justify;
      font-size: $font-md;
      top: auto;
      bottom: $pm-bg;
      left: 50%;
      transition: all .4s;
      transform: translate(-50%, 50%);
      position: fixed;
      > .header {
        padding-left: 0;
      }
      .hx-content {
        padding: $pm-md;
        text-align: center;
      }
      .footer {
        margin-top: $pm-md * 2;
        text-align: center;
        padding: 0;
      }
    }
    &.show {
      .content {
        transform: translate(-50%, 0);
      }
    }
  }
}