html, body {
  height: 100%;
}
#app {
  height: 100%;
}
.taro-tabbar {
  &__border {
    &-white {
      &::before {
        border-top-color: #fff !important;
      }
    }
  }
  &__container {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  &__panel {
    flex: 1;
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  &__tabbar {
    position: relative;
    height: 50px;
    width: 100%;
    transition: bottom .2s, top .2s;
    &-top {
      top: 0;
    }
    &-bottom {
      bottom: 0;
    }
    &-hide {
      display: none;
    }
    &-slideout {
      top: -52px;
      flex: 0 0;
    }
  }

  &__panel + &__tabbar-slideout {
    top: auto;
    bottom: -52px;
  }
}
