.tabbar-container {
  --wv-tabbar-background: rgba(var(--wv-theme-light-rgb), 1);
  position: relative;
  width: 100%;
  background: var(--wv-tabbar-background);
}

.wv-tabbar {
  --wv-indicator-height: 6rpx;

  width: 100%;
  height: auto;
  position: relative;
}

.wv-tabbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.wv-tabbar .wv-tabbar-content {
  display: flex;
  flex: 1;
  gap: var(--wv-padding-small);
  width: 100%;
  align-items: center;
  position: relative;
}

.wv-tabbar .wv-tabbar-content.no-gap {
  gap: 0;
}
.wv-tabbar .wv-tabbar-content.no-gap .wv-tabbar-item {
  border-radius: 0;
}

.wv-tabbar .wv-tabbar-content.no-gap .wv-tabbar-item.first-item {
  border-top-left-radius: var(--wv-border-radius-small);
  border-bottom-left-radius: var(--wv-border-radius-small);
}

.wv-tabbar .wv-tabbar-content.no-gap .wv-tabbar-item.last-item {
  border-top-right-radius: var(--wv-border-radius-small);
  border-bottom-right-radius: var(--wv-border-radius-small);
}

.wv-tabbar .wv-tabbar-content.no-indicator {
  padding: 0;
}

.wv-tabbar .wv-tabbar-indicator {
  width: 100%;
  height: var(--wv-indicator-height);
  overflow: visible;
  box-sizing: content-box;
}
.wv-tabbar .wv-tabbar-indicator.top {
  margin-bottom: var(--wv-margin-mini);
}
.wv-tabbar .wv-tabbar-indicator.bottom {
  margin-top: var(--wv-margin-mini);
}

.wv-tabbar .wv-tabbar-indicator .indicator {
  --wv-indicator-animation-duration: 200ms;
  --wv-indicator-left-from: 0;
  --wv-indicator-width-from: 0;
  --wv-indicator-left: 0;
  --wv-indicator-width: 0;

  height: var(--wv-indicator-height);
  position: absolute; 
  border-radius: var(--wv-border-radius-mini);
  transition-duration: var(--wv-indicator-animation-duration);
  transition-property: all;
  transition-timing-function: ease;
  
  left: var(--wv-indicator-left);
  width: var(--wv-indicator-width);
}


/* Animation types */
.wv-tabbar .wv-tabbar-indicator .indicator.animation-none {
  left: var(--wv-indicator-left);
  width: var(--wv-indicator-width);
}

.wv-tabbar .wv-tabbar-indicator .indicator.animation-slide.anim-stop {
  animation-play-state: paused;
}
.wv-tabbar .wv-tabbar-indicator .indicator.animation-slide.anim-run {
  animation-play-state: running;
  transition-property: left, width;
  animation-delay: 0ms;
  animation: indicator-slide var(--wv-indicator-animation-duration) ease-in-out forwards;
  transform-origin: center;
}
@keyframes indicator-slide {
  0% {
    left: var(--wv-indicator-left-from);
    width: var(--wv-indicator-width-from);
  }
  100% {
    left: var(--wv-indicator-left);
    width: var(--wv-indicator-width);
  }
}

.wv-tabbar .wv-tabbar-indicator .indicator.animation-blink.anim-stop {
  animation-play-state: paused;
}
.wv-tabbar .wv-tabbar-indicator .indicator.animation-blink.anim-run {
  animation-play-state: running;
  transition-property: left, width, opacity;
  animation-delay: 0ms;
  animation: indicator-blink var(--wv-indicator-animation-duration) ease-in-out forwards;
  transform-origin: center;
}

@keyframes indicator-blink {
  0% {
    left: var(--wv-indicator-left-from);
    width: var(--wv-indicator-width-from);
    transform: scaleX(1);
  }
  55% {
    left: var(--wv-indicator-left-from);
    width: var(--wv-indicator-width-from);
    opacity: 0;
    transform: scaleX(0);
  }
  56% {
    left: var(--wv-indicator-left);
    width: var(--wv-indicator-width);
    opacity: 0;
    transform: scaleX(0);
  }
  100% {
    left: var(--wv-indicator-left);
    width: var(--wv-indicator-width);
    transform: scaleX(1);
    opacity: 1;
  }
}

.wv-tabbar .wv-tabbar-indicator .indicator.animation-none {
  transition: none;
}