/* Loda Button: an icon button whose icon spins while `.is-loading` is set. */

.loda-btn,
.loda-btn:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  background: var(--color-bg-subtle);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  padding: .65em 1.4em .65em 1.1em;
  border-radius: .4em;
}

.loda-btn:hover {
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-border);
}

.loda-btn__icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform .3s;
  transform-style: preserve-3d;
}

.loda-btn.is-loading {
  color: var(--color-faint);
  cursor: default;
}

.loda-btn.is-loading .loda-btn__icon {
  color: var(--color-faint);
  animation: loda-anim .5s infinite linear alternate;
}

@keyframes loda-anim {
  from { transform: rotateY(1deg); }
  to   { transform: rotateY(179deg); }
}