website/assets/scss/roles.scss

// Asciidoctor roles (e.g., [.text-center]) on a block.
.error {
  --side-accent-color: var(--base08);
  --side-accent-color-text: var(--base05);
  --border-style: 2px var(--side-accent-color) solid;
}

.inline-block {
  display: inline-block;
}

.text-center {
  text-align: center;
}

.line-through {
  text-decoration: line-through;
}

.break-anywhere {
  overflow-wrap: anywhere;
}

.shake {
  animation: shake 0.1s alternate ease-in-out infinite;
}

.extreme-shake {
  animation: extreme-shake 0.1s alternate ease-in-out infinite;
}

.blur {
  filter: blur(4px);
}

.blur-blur {
  animation: blur-blur 4s alternate infinite;
}

.rainbow {
  animation: rainbow 5s infinite;
}

.bounce {
  animation: bounce 0.6s alternate ease-in-out infinite;
}

.mini-bounce {
  animation: mini-bounce 0.6s alternate ease-in-out infinite;
}

@media (prefers-reduced-motion) {
  .shake, .extreme-shake, .blur-blur, .bounce {
    animation: none;
  }
}