.wp-block-button.is-style-underline {
  & .wp-block-button__link {
/*    overflow: clip;*/
    background: transparent;
    border-color: currentColor;
    position: relative;
    border: 0;
    border-bottom: 3px solid white;
    text-decoration: none;
    display: inline-block;
    background: transparent;
    padding-inline: 0;
    border-radius: 0;    
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -3px;
      height: 3px;
      width: 100%;
      background-color: currentColor;
      scale: 0 1;      
      transform-origin: right;
      transition: scale 0.4s ease-in-out;
    }
    &:hover, &:focus {
      &:after {
        scale: 1 1;   
        transform-origin: left;        
        transition: scale 0.2s ease-out;
      }
    }
  }
}

.wp-block-button.is-style-glow {
  & .wp-block-button__link {
    position: relative;
    overflow: clip;
    backdrop-filter: blur(7px);
    background-color: #424245b3;
    box-shadow: inset 0 0 1px #e8e8ed1c;
    color: var(--wp--preset--color--white);    
    &:before, &:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      z-index: -1;
      background-color: black;
      transition: opacity 0.4s ease-out;
    }
    &:before {
      width: 100%;
      height: 100%;      
    }
    &:after {
      width: 110%;
      aspect-ratio: 1/1;
      background: linear-gradient(
        45deg,        
        #786658, 
        #3B2A23, 
        #9C8C7E
      );
      animation: gradientShift 5s ease-in-out infinite;
      animation-play-state: var(--glow-play, paused);    
    }
    &:hover {
      &:after {
        transition: opacity 0.3s ease;
        opacity: 0 !important;
        animation-play-state: paused;
      }
    }
  }
}

/* Keyframes to animate the gradient */
@keyframes gradientShift {
  0% {
/*    background-position: 0% 100%;*/
    rotate: 0deg;
    scale: 1 1;
  }
  50% {
/*    background-position: 150% 0%;*/
    rotate: 180deg;
    scale: 2 1;
  }  
  100% {
    rotate: 360deg;
    scale: 1 1;
  }
}


.lmb-open .wp-block-button.is-style-glow a:after {
  --glow-play: paused;
}

.wp-block-button__link:has(img) {
    display: flex;
    align-items: center;
    gap: 10px;
}