/**
 * Lightsaber styling
 * Animated lightsaber that grows with scroll and changes colors based on theme
 */

.saber-anchor {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 5rem;
  height: 15rem;
  z-index: 10;
  pointer-events: none;
}

#lightsaber {
  position: absolute;
  bottom: 7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: var(--saber-color);
  z-index: 2;
  pointer-events: auto;
  transition: height 50ms linear;
}

#saberhandle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 5rem;
  z-index: 1;
  pointer-events: auto;
}