@import url('../../less/icon.less');
.ac-custom-placeholder {
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.ac-custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .ac-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    &-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-weight: 500;
      pointer-events: none;
      z-index: -1;
    }
    &-left {
      flex: none;
    }
    &-middle {
      flex: 1 0 auto;
      height: 100%;
    }
  }
  .ac-control-btns {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    border-radius: 100rpx;
    border: 2rpx solid rgba(255,255,255,.4);
    .ac-iconfont {
      height: 100%;
      font-size: 40rpx;
      flex: 1;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ac-go-back {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        height: 50%;
        width: 2rpx;
        background: rgba(255,255,255,.4);
      }
    }
  }
  .ac-custom-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -2;
  }
}