/* "CodePen" Rainbow Border Button Style
   Refined for Ryuzenk Mitigation Core */

.codepen-button {
  display: inline-block;
  /* Changed from block to inline-block for toolbar */
  cursor: pointer;
  color: white;
  margin: 0;
  /* Removed auto margin */
  position: relative;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  /* Pill shape */
  overflow: hidden;
  padding: 2px;
  /* Thinner rainbow border */
  isolation: isolate;
  border: none;
  background: transparent;
}

.codepen-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  background-size: 25% 100%;
  animation: rainbow-border-move .75s linear infinite;
  animation-play-state: paused;
  translate: -5% 0%;
  transition: translate 0.25s ease-out;
  z-index: -1;
}

.codepen-button:hover::before {
  animation-play-state: running;
  transition-duration: 0.75s;
  translate: 0% 0%;
}

@keyframes rainbow-border-move {
  to {
    transform: translateX(-25%);
  }
}

.codepen-button span {
  position: relative;
  display: flex;
  /* Flex for centering icon+text */
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Tighter gap */
  padding: 6px 14px;
  /* Much smaller padding */
  font-size: 13px;
  /* Smaller font */
  background: #000;
  border-radius: 999px;
  /* Inner pill shape */
  height: 100%;
  color: white;
  transition: background 0.3s;
}

.codepen-button:hover span {
  background: #111;
  /* Subtle hover state for inner part */
}