/**
 * typetype default styles
 * 
 * Import: import 'typetype/style.css'
 * Customize with CSS variables on .typetype-container or :root
 */

/* ============================================
   VARIABLES (customize these)
   ============================================ */
.typetype-container {
  /* Typography */
  --typetype-font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  --typetype-font-size: 14px;
  --typetype-line-height: 1.5;
  
  /* Cursor */
  --typetype-cursor-color: currentColor;
  --typetype-cursor-width: 0.5em;
  --typetype-cursor-height: 1.2em;
  --typetype-cursor-blink-speed: 1s;
  --typetype-cursor-margin: 2px;
  
  /* Spacing */
  --typetype-line-margin: 0;
  --typetype-line-padding: 0;
  --typetype-line-min-height: calc(var(--typetype-font-size) * var(--typetype-line-height));
  
  /* Spinner */
  --typetype-spinner-speed: 0.8s;
  --typetype-spinner-margin: 0.5em;
}

/* ============================================
   BASE STYLES
   ============================================ */
.typetype-container {
  font-family: var(--typetype-font-family);
  font-size: var(--typetype-font-size);
  line-height: var(--typetype-line-height);
}

.typetype-line {
  margin: var(--typetype-line-margin);
  padding: var(--typetype-line-padding);
  min-height: var(--typetype-line-min-height);
  white-space: pre-wrap;
  word-break: break-word;
}

.typetype-prefix {
  user-select: none;
}

.typetype-cursor-line {
  margin: var(--typetype-line-margin);
  padding: var(--typetype-line-padding);
}

.typetype-cursor {
  display: inline-block;
  width: var(--typetype-cursor-width);
  height: var(--typetype-cursor-height);
  background: var(--typetype-cursor-color);
  vertical-align: text-bottom;
  margin-left: var(--typetype-cursor-margin);
}

.typetype-blink {
  animation: typetype-blink var(--typetype-cursor-blink-speed) step-end infinite;
}

.typetype-spinner::before {
  display: inline-block;
  margin-right: var(--typetype-spinner-margin);
}

/* Spinner variant: dots (default) - braille pattern */
.typetype-spinner[data-variant="dots"]::before {
  content: '⠋';
  animation: typetype-spin-dots var(--typetype-spinner-speed) steps(10) infinite;
}

/* Spinner variant: line */
.typetype-spinner[data-variant="line"]::before {
  content: '|';
  animation: typetype-spin-line var(--typetype-spinner-speed) steps(4) infinite;
}

/* Spinner variant: circle */
.typetype-spinner[data-variant="circle"]::before {
  content: '◐';
  animation: typetype-spin-circle var(--typetype-spinner-speed) steps(4) infinite;
}

/* Spinner variant: square */
.typetype-spinner[data-variant="square"]::before {
  content: '◰';
  animation: typetype-spin-square var(--typetype-spinner-speed) steps(4) infinite;
}

/* Spinner variant: arrow */
.typetype-spinner[data-variant="arrow"]::before {
  content: '←';
  animation: typetype-spin-arrow var(--typetype-spinner-speed) steps(8) infinite;
}

/* Spinner variant: bounce */
.typetype-spinner[data-variant="bounce"]::before {
  content: '⠁';
  animation: typetype-spin-bounce var(--typetype-spinner-speed) steps(8) infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes typetype-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Spinner: dots (braille) */
@keyframes typetype-spin-dots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
}

/* Spinner: line */
@keyframes typetype-spin-line {
  0% { content: '|'; }
  25% { content: '/'; }
  50% { content: '—'; }
  75% { content: '\\'; }
}

/* Spinner: circle */
@keyframes typetype-spin-circle {
  0% { content: '◐'; }
  25% { content: '◓'; }
  50% { content: '◑'; }
  75% { content: '◒'; }
}

/* Spinner: square */
@keyframes typetype-spin-square {
  0% { content: '◰'; }
  25% { content: '◳'; }
  50% { content: '◲'; }
  75% { content: '◱'; }
}

/* Spinner: arrow */
@keyframes typetype-spin-arrow {
  0% { content: '←'; }
  12.5% { content: '↖'; }
  25% { content: '↑'; }
  37.5% { content: '↗'; }
  50% { content: '→'; }
  62.5% { content: '↘'; }
  75% { content: '↓'; }
  87.5% { content: '↙'; }
}

/* Spinner: bounce */
@keyframes typetype-spin-bounce {
  0% { content: '⠁'; }
  12.5% { content: '⠂'; }
  25% { content: '⠄'; }
  37.5% { content: '⡀'; }
  50% { content: '⢀'; }
  62.5% { content: '⠠'; }
  75% { content: '⠐'; }
  87.5% { content: '⠈'; }
}