.abcjs-inline-audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(var(--bs-border-color-rgb), 1);
  border-radius: 0.75rem;
  background: var(--bs-body-tertiary-bg);
  color: var(--bs-body-color);
}

.abcjs-inline-audio button,
.abcjs-inline-audio .abcjs-midi-start,
.abcjs-inline-audio .abcjs-midi-reset,
.abcjs-inline-audio .abcjs-midi-loop {
  appearance: none;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.28);
  background: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-body-color);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.abcjs-inline-audio button:hover,
.abcjs-inline-audio .abcjs-midi-start:hover,
.abcjs-inline-audio .abcjs-midi-reset:hover,
.abcjs-inline-audio .abcjs-midi-loop:hover {
  background: rgba(var(--bs-primary-rgb), 0.14);
  border-color: rgba(var(--bs-primary-rgb), 0.42);
  transform: translateY(-1px);
}

.abcjs-inline-audio button:disabled,
.abcjs-inline-audio .abcjs-midi-start:disabled,
.abcjs-inline-audio .abcjs-midi-reset:disabled,
.abcjs-inline-audio .abcjs-midi-loop:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.abcjs-inline-audio input[type="range"] {
  inline-size: min(220px, 100%);
}

.abcjs-inline-audio select {
  min-inline-size: 4.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(var(--bs-border-color-rgb), 1);
  border-radius: 0.55rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.abcjs-inline-audio .abcjs-midi-progress-background,
.abcjs-inline-audio .abcjs-progress-background {
  position: relative;
  flex: 1 1 180px;
  min-inline-size: 8rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background: rgba(var(--bs-body-color-rgb), 0.12);
  overflow: hidden;
}

.abcjs-inline-audio .abcjs-midi-progress-indicator,
.abcjs-inline-audio .abcjs-progress-indicator {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.9), rgba(var(--bs-success-rgb), 0.72));
}

.abcjs-inline-audio .abcjs-midi-clock,
.abcjs-inline-audio .abcjs-midi-current-time,
.abcjs-inline-audio .abcjs-midi-total-time,
.abcjs-inline-audio .abcjs-tempo-wrapper {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}

.abcjs-inline-audio .abcjs-midi-tempo {
  inline-size: 4rem;
}

.abcjs-inline-audio svg {
  fill: currentColor;
}