/*
  Theme: NYCSS Syntax Highlighter
  Author: Tim Chinye (https://github.com/timchinye/)
  License: Unlicense
  Last Updated: 01.04.2024
*/

.ace-nycss.ace_editor {
  --background-colour: rgb(from var(--shades-black) r g b / var(--opacity-low));
  --window-text-colour: rgb(from var(--shades-darker) r g b / var(--opacity-medium));
  --code-text-colour: rgb(from var(--shades-lightest) r g b / var(--opacity-high));
  --code-selection-shadow-colour: rgb(from var(--shades-black) r g b / var(--opacity-low));
  --code-punctuation-colour: rgb(from var(--shades-white) r g b / var(--opacity-medium));
  --code-parenthesis-colour: rgb(from var(--shades-lightest) r g b / var(--opacity-medium));
  
  border-radius: 0 0 1rem 1rem;
  border: 0.125rem solid var(--window-text-colour);
  background-color: var(--background-colour);
  color: var(--code-text-colour);
  
  font-family: "Fira Code", monospace;
  font-size: 1.25rem;
}

.ace-nycss .ace_gutter {
  background: transparent;
  color: var(--window-text-colour);
  width: 3.19rem !important;
}

.ace-nycss .ace_layer {
  width: inherit !important;
}

.ace-nycss .ace_gutter-cell {
  padding-left: 1.08rem;
  padding-right: 1.81rem;
  
  > span:first-child {
    translate: 4px;
  }
}

.ace-nycss .ace_gutter-active-line {
  font-weight: bold;
  background: rgb(from color-mix(in srgb, var(--pri-colour-em-darker), var(--sec-colour-em-darker)) r g b / var(--opacity-low));
}

.ace-nycss .ace_marker-layer .ace_active-line {
  background: rgb(from color-mix(in srgb, var(--pri-colour-em-darker), var(--sec-colour-em-darker)) r g b / var(--opacity-medium));
}

.ace-nycss .ace_scroller {
  background-color: transparent;
  left: 3.19rem !important;
}

.ace-nycss .ace_paren {  /*  {  }  */
  color: var(--code-parenthesis-colour);
}

.ace-nycss .ace_constant {  /*  main article  */
  color: var(--sec-colour-medium);
}

.ace-nycss .ace_support.ace_type {  /*  min-width  */
  color: var(--pri-colour-medium);
}

.ace-nycss .ace_string {  /*  :focus  */
  color: var(--sec-colour-lighter);
}

.ace-nycss .ace_support.ace_constant {  /*  inline-flex  */
  color: var(--sec-colour-medium);
}

.ace-nycss .ace_support.ace_constant.ace_fonts {  /*  cursive  */
  color: var(--sec-colour-lightest);
  font-style: italic;
}

.ace-nycss .ace_string + .ace_keyword {  /*  @media  */
  color: var(--sec-colour-lighter);
}

.ace-nycss .ace_keyword:has(~ .ace_lparen) {  /*  #id  */
  color: var(--sec-colour-medium);
}

.ace-nycss .ace_keyword {  /*  rem  */
  color: var(--sec-colour-m-darker);
}

.ace-nycss .ace_constant.ace_numeric {  /*  0.75  */
  color: var(--sec-colour-darker);
}

.ace-nycss .ace_punctuation.ace_operator {  /*  : ;  */
  color: var(--code-punctuation-colour);
}

.ace-nycss .ace_fold {  /*  <-->  */
  background-color: var(--pri-colour-m-darker);
}

.ace-nycss .ace_cursor {  /*  |  */
  color: var(--code-text-colour);
}

.ace-nycss .ace_support.ace_function {  /*  url() */
  color: var(--sec-colour-medium);
}

.ace-nycss .ace_comment {  /*  //  */
  color: var(--pri-colour-m-darker);
}

.ace-nycss .ace_variable {  /*  .class  */
  color: var(--sec-colour-medium);
}

.ace-nycss:has(.ace_marker-layer > .ace_selection) {
  &.ace_multiselect .ace_selection.ace_start {
    z-index: 5;
  }
  
  .ace_selection.ace_br12 {
    z-index: 6;
  }

  &.ace_multiselect .ace_selection.ace_start,
  .ace_marker-layer .ace_selection {
    background: rgb(from var(--pri-colour-m-darker) r g b / var(--opacity-medium));
    box-shadow: 0px 0px 0px 8px var(--code-selection-shadow-colour);
    clip-path: inset(0 0 -20px 0px);
  }
}

.ace-nycss .ace_marker-layer .ace_selected-word {  /* *** Get Back To This Later *** */
  background: transparent;
  border: none;
}

.ace-nycss .ace_marker-layer .ace_bracket {
  margin: unset;
  border: none;
  background: color-mix(in srgb, var(--pri-colour-em-darker), var(--pri-colour-m-darker) 30%);
  box-shadow: 0px 0px 8px 0px var(--pri-colour-m-darker);
}

.ace-nycss .ace_indent-guide {
  background: none;
  border-right: 1px solid rgb(from var(--code-parenthesis-colour) r g b / var(--opacity-medium));
  /* border: none; */
}

.ace-nycss .ace_indent-guide-active {
  border-color: color-mix(in srgb, var(--code-parenthesis-colour), var(--shades-white) 25%);
}

.ace-nycss :is(.language_highlight_text, .language_highlight_read, .language_highlight_write) {
  border: none;
  --highlight-colour: var(--sec-colour-m-darker);
  background: rgb(from var(--highlight-colour) r g b / var(--opacity-medium));
  box-shadow: 0px 0px 8px 0px var(--highlight-colour);
  clip-path: inset(-8px 0);
  z-index: 7;
}

.ace-nycss .language_highlight_write {
  --highlight-colour: rgb(from var(--shades-medium) r g b / var(--opacity-low));
}

.ace-nycss .ace_highlight-marker {
  background-color: rgb(from var(--shades-medium) r g b / var(--opacity-low));
}

.ace_scrollbar {
  --track-colour: var(--background-colour);
  --thumbnail-colour: var(--sec-colour-darker);
  --scrollbar-padding: 0.227rem;
  --scrollbar-margin: 0.454rem;
  --scrollbar-width: 0.68rem;
  align-self: flex-end;
  margin: var(--scrollbar-margin);

  &.ace_scrollbar-v {
    bottom: calc(var(--scrollbar-width) + (var(--scrollbar-margin) / 2)) !important;
    height: calc(100% - (2 * var(--scrollbar-margin)) - var(--scrollbar-width)) !important;
    width: 1.13rem !important;
    z-index: 7;
    
    > .ace_scrollbar-inner {
      width: inherit !important;
    }
  }

  &.ace_scrollbar-h {
    --gutter-width: 73px;
    width: calc(100% - (var(--gutter-width) + (2 * var(--scrollbar-margin)))) !important;
    z-index: 7;
  }

  /*
    border-radius: 0 !important;
    border-color: transparent;
  */

  /* Non-Standard Properties */
  @supports selector(::-webkit-scrollbar) {
    &::-webkit-scrollbar {
      width: var(--scrollbar-width);
      height: var(--scrollbar-width);
    }

    &:has(.ace_scrollbar-inner) {
      &::-webkit-scrollbar-thumb {
        background: var(--thumbnail-colour);
        border-radius: 999px;
        border: var(--scrollbar-padding) solid transparent;
        background-clip: padding-box;
      }
  
      &::-webkit-scrollbar-thumb:vertical { background-color: var(--thumbnail-colour); }
      &::-webkit-scrollbar-thumb:vertical:hover { background-color: color-mix(in srgb, var(--thumbnail-colour), var(--shades-white)); }
      &::-webkit-scrollbar-thumb:horizontal { background-color: color-mix(in srgb, var(--thumbnail-colour), transparent); }
      &::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--thumbnail-colour); }
    }

    &::-webkit-scrollbar-track {
      background: var(--track-colour);
      border-radius: 999px;
    }
  }

  /* Standard Properties */
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-color: var(--thumbnail-colour) var(--track-colour);
    scrollbar-width: thin;
  }
}

.ace-nycss .ace_invalid {  /*  <no-width space>  */
  background-color: rgb(from var(--red-colour-em-darker) r g b / var(--opacity-medium)) !important;
  color: var(--red-colour-medium) !important;
}

.ace-nycss.ace_tooltip {
  padding: 1rem;
  background-color: rgb(from var(--pri-colour-em-darker) r g b / 0.9);
  border: 1px solid var(--pri-colour-m-darker);
  border-radius: 8px;
  color: var(--shades-lighter);
  font-size: 1rem;
  min-width: 15em;
  cursor: auto;

  &:hover {
    border-color: var(--pri-colour-darker);
  }

  &:focus {
    outline: none;
    border-color: var(--shades-darker);
  }
}

.ace-nycss.ace_tooltip * {
  font-size: inherit;
}

.ace-nycss.ace_tooltip code {
  font-family: "Fira Code", monospace;
  color: var(--shades-medium);
}

.ace-nycss.ace_tooltip p {
  font-family: 'Poppins', 'Calibri', sans-serif;
  color: var(--shades-lighter);
}

.ace-nycss.ace_tooltip a {
  color: var(--sec-colour-medium);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.ace-nycss .ace_constant.ace_language {  /*  Escaped characters within quotes  */
  color: var(--pri-colour-lightest);
  background: unset;
}

.ace-nycss .ace_search {
  background-color: var(--pri-colour-em-darker);
  border-color: var(--window-text-colour);
  color: var(--code-text-colour);
}

.ace-nycss :is(.ace_search_field, .ace_searchbtn) {
  background-color: var(--pri-colour-em-darker);
  border: none;
  color: var(--shades-darker);

  &:hover {
    color: var(--shades-medium);
  }
}

.ace-nycss .ace_button {
  padding-inline: 4px;
  border: none;
  color: var(--pri-colour-darker);

  &:hover {
    background-color: var(--pri-colour-em-darker);
  }
}

.ace-nycss .ace_searchbtn {
  &::after {
    border-color: currentColor;
    margin-bottom: 1px;
  }

  &.prev::after {
    border-width: 1px 0 0 1px;
  }

  &.next::after {
    border-width: 0 1px 1px 0;
  }
}

.ace-nycss .ace_search_counter {
  color: var(--sec-colour-m-darker);
}

.ace-nycss .ace_searchbtn_close {
  background-color: var(--pri-colour-em-darker);
  translate: 50% -50%;
  top: calc((2.09rem / 2) + 4px);
  right: calc(26px / 2);
}

.ace-nycss .ace_search_form.ace_nomatch {
  outline-color: var(--red-colour-m-darker);
}

.ace-nycss .ace_fold-widget {
  background-size: 0.4rem;
}

/* Everything Above is Fixed */

.ace-nycss .ace_invisible {  /*  Unknown  */
  background-color: rgb(255 255 255 / 10%);
  /* color: var(--code-punctuation-colour); */
  background-color: orange;
}

.ace-nycss .ace_storage {  /*  Unknown  */
  color: blue;
  background-color: orange;
}

.ace-nycss .ace_constant.ace_buildin {  /*  Unknown  */
  color: rgb(88, 72, 246);
  background: orange;
}

.ace-nycss .ace_constant.ace_library {  /*  Unknown  */
  color: rgb(6, 150, 14);
  background: orange;
}

.ace-nycss .ace_keyword.ace_operator {  /*  Unknown  */
  color: rgb(104, 118, 135);
  background: orange;
}

.ace-nycss .ace_comment.ace_doc {  /*  Unknown  */
  color: rgb(0, 102, 255);
  background: orange;
}

.ace-nycss .ace_comment.ace_doc.ace_tag {  /*  Unknown  */
  color: rgb(128, 159, 191);
  background: orange;
}

.ace-nycss .ace_xml-pe {  /*  Unknown  */
  color: rgb(104, 104, 91);
  background: orange;
}

.ace-nycss .ace_entity.ace_name.ace_function {  /*  Unknown  */
  color: #0000A2;
  background: orange;
}

.ace-nycss .ace_heading {  /*  Unknown  */
  color: rgb(12, 7, 255);
  background: orange;
}

.ace-nycss .ace_list {  /*  Unknown  */
  color:rgb(185, 6, 144);
  background: orange;
}

.ace-nycss .ace_meta.ace_tag {  /*  Unknown  */
  color:rgb(0, 22, 142);
  background: orange;
}

.ace-nycss .ace_string.ace_regex {  /*  Unknown  */
  color: rgb(255, 0, 0);
  background: orange;
}

.ace-nycss .ace_marker-layer .ace_step {  /*  Unknown  */
  background: rgb(252, 255, 0);
  background: orange;
}

.ace-nycss .ace_marker-layer .ace_stack {
  background: rgb(164, 229, 101);  /*  Unknown  */
  background: orange;
}