[data-theme='dark'] {
  @import 'highlight.js/scss/github-dark.scss';
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
}

[data-theme='light'] {
  @import 'highlight.js/scss/github.scss';
  --color-neutral-muted: rgba(150, 160, 170, 0.3);
}

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

* {
  scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.markdown-body {
  overflow-y: auto;
  overflow-x: hidden;

  pre {
    padding: 0;
    background: transparent;

    code {
      font-size: 14px;
    }
  }

  code {
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 8px;
    background-color: var(--color-neutral-muted);
  }

  details summary {
    cursor: pointer;
  }
}

midi-player {
  &::part(control-panel) {
    background: none;
  }
}

midi-visualizer {
  $instrument-colors: #007bff, #20c997, #dc3545, #6610f2, #ffc107, #e83e8c, #17a2b8, #fd7e14, #28a745;

  svg {
    @for $i from 0 to 200 {
      $color: nth($instrument-colors, ($i % length($instrument-colors)) + 1);
      rect.note[data-instrument="#{$i}"] {
        fill: $color;
      }
    }
  }
}