.ac-code-highlight {
  pre {
    font-size: 1rem;
    color: $color-heading;
    background-color: $color-border;
  }

  &.is-dark {
    pre {
      background-color: $primary-10;
      color: $white-100;
    }
  }
}

code[class*="language-"],
pre[class*="language-"] {
  font-size: 14px !important;
}

.editor-writable {
  width: 100%;
  border-radius: 4px !important;
  border: 1px solid $white-100 !important;
}

.monaco-editor {
  width: 100%;
  height: calc(100vh - 320px);
  border-radius: 4px;
}

/****************************************
Responsive Classes
*****************************************/
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}