@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: visibility .4s, opacity .4s;
  overflow-x: hidden;
  &.show {
    visibility: visible;
    opacity: 1.0;
    &.normal>.content, 
    &.hx-image-modal>.content {
      transform: translate(-50%, -50%);
    }
    &.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: 460px;
      min-width: 280px;
    }
  }
  &.bg {
    & > .content {
      width: 80%;
    }
  }
  // 模态框内容版
  & > .content {
    background-color: white;
    width: 60%; // 默认样式为屏幕宽度 60%     
    max-height: 90%;
    overflow-y: auto;                                
    padding: 0;
    box-shadow: 0 24px $pm-bg -16px rgba(0,0,0,.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .4s;
    // 模态框头部
    > .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-main-content {
      padding: 0 $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;
      button {
        min-width: 100px;
      }
    }
  }
  &.normal>.content {
    border-radius: $border-radius-md;
    // 模态框底部
    & > .footer {
      text-align: center;
      margin: $pm-md;
    }
  }
  // 侧边模式下的弹框
  &.side > .content {
    width: 30%;
    min-width: 300px;
    display: block;
    height: 100%;
    right: 0;
    left: unset;
    top: 0;
    position: absolute;
    transform: none;
    max-height: 100%;
    transform: translateX(100%);
    transition: transform .4s; 
    @include borderRadiusLeft($border-radius-bg);
    >.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 {
      padding: 0;
      max-width: 80%;
    }
    & > .footer {
      border-top: 1px solid $color-gray;
      margin-top: $pm-md;
    }
  }
}
/* ----------------------------------------------------
    移动端样式适配
 ------------------------------------------------------ */
@media screen and (max-width: 640px) {
  .hx-modal {
    z-index: 25;
    &.normal > .content {
      width: 95%;
      max-width: 90%;
      @include centerInParent;
      .btn-close-modal {
        right: $sm;
        top: $sm;
      }
      & > .header {
        height: $height-navbar;
        line-height: $height-navbar;
        border-bottom: 1px solid $color-gray-light;
        padding-left: 0;
        text-align: center;
        margin-bottom: 0;
        display: block;
        background-color: white;
        font: {
          size: $font-bg;
          weight: 500;
        }
        &:before {
          height: $height-regular/2;
          top: -2px;
          width: 28%;
          height: 6px;
          @include centerHorizontal;
          border-radius: 4px;
        }
      }
      .map {
        margin-top: $sm;
      }
    }
    &.side {
      & > .content {
        width: calc(100% - #{$height-navbar});
        min-width: unset;
        max-width: unset;
      }
    }
  }

  .hx-modal.actionsheet  {
    >.content {
      padding: $pm-sm;
      width: calc(100% - #{$md});
      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: $md;
        text-align: center;
      }
      .footer {
        margin-top: $md * 2;
        text-align: center;
        padding: 0;
      }
    }
    &.show {
      .content {
        transform: translate(-50%, 0);
      }
    }
  }
}