.TextButton {
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  padding: 0.5rem 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: lowercase;
  transition: color 0.2s ease;
  white-space: nowrap;
}

@media (hover: hover) {
  .TextButton:hover:not(:disabled) {
    color: var(--text-secondary);
  }
}

.TextButton:active:not(:disabled) {
  color: var(--text-secondary);
  transition-duration: 0.05s;
}

.TextButton:disabled {
  pointer-events: none;
  cursor: default;
}

.TextButton--pending {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to right,
    var(--text-muted) 0%,
    var(--text-secondary) 50%,
    var(--text-muted) 100%
  );
  background-size: 30px 100%;
  background-repeat: no-repeat;
  background-color: var(--text-muted);
  background-clip: text;
  -webkit-background-clip: text;
  animation: text-shimmer 2s ease-out infinite;
}

@keyframes text-shimmer {
  0% {
    background-image: linear-gradient(
      to right,
      var(--text-muted) 0%,
      var(--text-secondary) 50%,
      var(--text-muted) 100%
    );
    background-position: -30px 0;
    background-clip: text;
    -webkit-background-clip: text;
  }
  80% {
    background-image: linear-gradient(
      to right,
      var(--text-muted) 0%,
      var(--text-secondary) 50%,
      var(--text-muted) 100%
    );
    background-position: 100px 0;
    background-clip: text;
    -webkit-background-clip: text;
  }
  100% {
    background-image: linear-gradient(
      to right,
      var(--text-muted) 0%,
      var(--text-secondary) 50%,
      var(--text-muted) 100%
    );
    background-position: 150px 0;
    background-clip: text;
    -webkit-background-clip: text;
  }
}