@import "../base/mixin";
@import "../base/mixin/mixin-modal";

// 分享操作
// --------------------------------------------------
.h5ui-modal_share {
  .mixin-modal;

  .modal-header{
    .mixin-modal-header;
  }

  .modal-body{
    .mixin-modal-body;
    padding: 0;
    width: 100%;
    margin-bottom: 10px;
    display: table;
    .item {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      text-align: center;
      color: @colorGrayDark;
      font-size: 12px;
      padding-bottom: 10px;
      .icon {
        width: 60px;
        height: 60px;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        display: block;
        margin: 5px auto;
        background: @colorWhite;
      }
    }
  }

  .modal-dialog {
    .mixin-modal-dialog;
    bottom: 0;
    .mixin-animate-fade-in-up(300ms, 0ms, 200px, 0);
  }

  .modal-content{
    .mixin-modal-content;
    background: #F3F4F6;
  }

  .modal-footer {
    .h5ui-btn{
      background: @colorWhite;
      border-radius: 0;
      padding: 12px 16px;
      &:before{
        display: none;
      }
      &:active{
        background: #F5F5F5;
      }
    }
  }

}

// backdrop-filter supports
@supports (-webkit-backdrop-filter: none) {
  .h5ui-modal_share .modal-content {
    -webkit-backdrop-filter: blur(18px);
    background: rgba(243, 244, 246, 0.95);
  }
}


// 菜单选择操作
// --------------------------------------------------
.h5ui-modal_actionsheet {
  .mixin-modal;

  .modal-header{
    .mixin-modal-header;
  }

  .modal-dialog {
    .mixin-modal-dialog;
    bottom: 0;
    .mixin-animate-fade-in-up(300ms, 0ms, 200px, 0);
  }

  .modal-content{
    .mixin-modal-content;
    background: #F3F4F6;
  }

  .modal-body{
    .mixin-modal-body;
    padding: 0;

    .h5ui-btn{
      background: @colorWhite;
      position: relative;
      border-radius: 0;
      padding: 12px 16px;
      &:active{
        background: #F5F5F5;
      }
      &:before{
        display: none;
      }
      &:after {
        .mixin-hairline_bottom;
      }
      &:last-child{
        &:after {
          display: none;
        }
      }
    }
  }

  .modal-footer{
    margin-top: 8px;
    .h5ui-btn{
      background: @colorWhite;
      border-radius: 0;
      padding: 12px 16px;
      &:active{
        background: #F5F5F5;
      }
      &:before{
        display: none;
      }
    }
  }
}