.layer-container {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;

  .layer-content{
    display: inline-flex;
    @include flex-column();
    min-width: 300px;
    background: white;
    position: relative;

    .layer-title{
      @include box();
      @include flex-justify-between();
      @include flex-align-center();
      cursor: move;
      height: 50px;
      color:$color-text-regular;
      font-size: $font-large;
      padding: 0 $space-big;
      border-bottom: 1px solid $color-border-base;

      .layer-title-left{
        icon{
          font-size: $font-large;
        }
      }

      .layer-title-right{
        @include box();
        @include flex-center();
        cursor: pointer;
      }
    }

    .layer-detail{
      @include box();
      @include flex-column();
      height: 100%;
      box-sizing: border-box;

      .layer-btn {
        @include box();
        @include flex-center();
        margin: $space-bigger 0 $space-big;
        font-size: $font-default !important;

        .efly-button{
          min-width: 100px;
          // padding: 10px;
          height: $height-small;
          margin-left: $space-default;

          &:first-child{
            margin-left: 0;
          }
        }
      }
    }
  }
}

.layer-message-container {
  display: inline-block;
  position: fixed;
  z-index: 10000;
  min-width: 120px; // 之前180
  border: 1px solid #ccc;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .layer-content {
    @include flex-column();
    padding: 15px 20px 15px 55px;
    line-height: 20px;
    position: relative;

    .icon {
      font-size: 30px;
      position: absolute;
      top: 15px;
      left: 15px;
    }
    .icon.text-info {color: $color-info;}
    .icon.text-success {color: $color-success;}
    .icon.text-warning {color: $color-warning;}
    .icon.text-danger {color:$color-danger;}
  }
}

.layer-load-container {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.3);
  z-index: 10000;


  & > .layer-content {
    @include flex-column();
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .load-icon-content {
      font-size: 30px;
      display: inline-block;
    }
    .load-msg-content {
      display: inline-block;
      font-size: 14px;
    }
  }

  & > .layer-content-container {
    display: inline-block;
    position: absolute;
    min-width: 180px;
    border: 1px solid #ccc;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .layer-content {
      // @include box();
      padding: 15px 20px 15px 55px;
      line-height: 20px;
      position: relative;

      & .load-icon-content {
        position: absolute;
        font-size: 30px;
        left: 15px;
      }
    }
  }

  .icon {font-size: inherit;}
  .icon.text-info {color: $color-info;}
  .icon.text-success {color: $color-success;}
  .icon.text-warning {color: $color-warning;}
  .icon.text-danger {color:$color-danger;}
}


.animation-rotate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}


@-webkit-keyframes rotate {
  from {
      -webkit-transform: rotateZ(0deg);
      transform: rotateZ(0deg);
  }

  to {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
  }
}

@keyframes rotate {
  from {
      -webkit-transform: rotateZ(0deg);
      transform: rotateZ(0deg);
  }

  to {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
  }
}