[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;
  overflow: hidden;
  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;

  ul,
  ol {
    padding-left: 1.5em;
  }

  ol {
    list-style: none;
    counter-reset: item;

    li {
      counter-increment: item;

      &::marker {
        content: counter(item) '. ';
      }
    }
  }

  pre {
    padding: 0;

    code {
      font-size: 14px;
    }
  }

  p {
    margin: 0 0 10px;
  }

  code {
    padding: 0 0.4em;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 8px;
    background-color: var(--color-neutral-muted);
    font-size: 11px;

    .hljs {
      padding: 0;
    }
  }
}

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;
      }
    }
  }
}