:host {
  display: block;
}

.container {
  position: relative;
  overflow: hidden;
  user-select: none;

  &.triggered .bar {
    opacity: 0.6;
  }

  &.armed .stick-bottom {
    top: calc(100% - 1.25rem);
  }
}

.content {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 0.75rem;
  height: 1.25rem;
  overflow: visible;
  pointer-events: none;

  &.stick-bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}

.title {
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0.7;
}

.animate {
  display: inline-block;
  position: relative;
  animation: move-up-down 1s linear infinite;
}

.track {
  flex: 1;
  max-width: 7.5rem;
  height: 0.1875rem;
  border-radius: 0.125rem;
  background: white;
  overflow: hidden;
}

.bar {
  height: 100%;
  border-radius: 0.125rem;
  background: var(--primary-color);
  transition: width 60ms linear;
}

.trigger-sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.0625rem;
  pointer-events: none;

  &.at-top {
    bottom: auto;
    top: 0;
  }
}


@keyframes move-up-down {
  0%, 100% {
    top: 0;
  }
  50% {
    top: -0.375rem;
  }
}
