.bottom-appbar {
  z-index: var(--app-z-nav, 5000);
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: calc(var(--app-nav-height, 80px) + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)));
  padding-bottom: var(--app-safe-bottom, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: flex;
  justify-content: space-evenly;
  background: #fff;

  @media screen and (min-width: 426px) {
    width: 426px;
    max-width: 426px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .tabs {
    display: flex;
    height: 100%;
    width: 100%;
    background: #fff;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    z-index: 400;
    box-shadow: 0 -2px 4px -2px #0000001a;

    .tab {
      width: 80px;
      text-align: center;
      flex-flow: column;
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;

      &.text-primary .tab__icon,
      &.text-primary .tab__icon .ant-badge {
        color: @primary-color;
      }

      &.text-gray-400 .tab__icon,
      &.text-gray-400 .tab__icon .ant-badge {
        color: #9ca3af;
      }
    }

    .main_in {
      width: 70px;
      height: 70px;
      flex-shrink: 0;
      align-self: center;

      .circle_in {
        margin-top: -10px;
        border-radius: 50%;
        width: 70px;
        height: 70px;
        flex-shrink: 0;
        z-index: 20;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #a72b77;

        .circle_into {
          overflow: hidden;
          background-color: @primary-color;
          border-radius: 50%;
          width: 56px;
          height: 56px;
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          border: white 1px solid;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }

  .main {
    height: 70px;
    width: 70px;
    position: relative;

    .circle {
      border-radius: 50%;
      height: 70px;
      width: 70px;
      z-index: 20;
      box-shadow: 0 -5px 4px -2px #0000001a;
      position: absolute;
    }
  }
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.mobile-app-layout {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.main-with-bottom-chrome {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.main-with-bottom-chrome-inner {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.main-with-bottom-chrome-inner--contained {
  overflow: hidden;
}

.main-with-bottom-chrome--no-nav,
.main-with-bottom-chrome--no-nav .main-with-bottom-chrome-inner {
  flex: 1 1 auto;
  min-height: 0;
}