/* Twitch Button Style - Standalone Version */
.twitch-animated-button {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  /* Use a default Twitch purple, or allow override */
  background-color: var(--clr, #6441a5);
  color: #fff;
  border-radius: 10rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  /* Adjust padding-left slightly if needed for the icon wrapper */
  padding-left: 0.75rem;
  white-space: nowrap;
  overflow: hidden; /* Keep overflow hidden on the button itself */
  text-overflow: ellipsis;
  transition: background-color 0.3s;
  font-family: sans-serif; /* Example font */
}

.twitch-animated-button__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative; /* Crucial for absolute positioning of icons */
  color: var(--clr, #6441a5); /* Icon color comes from variable */
  background-color: #fff;
  border-radius: 50%;
  display: grid; /* Center the first (non-absolute) icon */
  place-items: center; /* Center the first (non-absolute) icon */
  overflow: hidden; /* Hide icons when they move outside */
  /* Remove !important unless absolutely necessary due to external conflicts */
}

/* Style for the icons themselves if needed (e.g., size) */
.twitch-icon {
   font-size: 15px; /* Adjust size as needed */
   line-height: 1; /* Prevent extra space */
   display: block; /* Good practice for icons */
}


.twitch-animated-button:hover {
  background-color: #794acf;
}

.twitch-animated-button:hover .twitch-animated-button__icon-wrapper {
  color: #794acf; /* Change icon color on hover */
}

/* --- Animation --- */

/* Main Icon (Initially visible) */
.twitch-animated-button__icon--main {
  /* Grid layout centers this one automatically */
  transition: transform 0.3s ease-in-out;
}

/* Copy Icon (Initially hidden) */
.twitch-animated-button__icon--copy {
  position: absolute;
  top: 50%; /* Position top edge at center */
  left: 50%; /* Position left edge at center */
  /* Initial State: Centered, then moved down/left relative to own size */
  transform: translate(-50%, -50%) translate(-150%, 150%);
  transition: transform 0.3s ease-in-out 0.1s; /* Delayed transition */
}

/* Hover Animations */
.twitch-animated-button:hover .twitch-animated-button__icon--main {
  /* Move up/right relative to own size */
  transform: translate(150%, -150%);
}

.twitch-animated-button:hover .twitch-animated-button__icon--copy {
  /* Final State: Centered */
  transform: translate(-50%, -50%);
}