/*-- scss:functions --*/
@function colorToRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
  }

  @function luminance($color) {
    $r: red($color) / 255;
    $g: green($color) / 255;
    $b: blue($color) / 255;

    $r: if($r < 0.03928, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
    $g: if($g < 0.03928, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
    $b: if($b < 0.03928, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));

    @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
    }

    @function contrast-color($background-color, $light-color: #d1d1d1, $dark-color: #2d2d2d) {
    @if luminance($background-color) > 0.3 {
        @return $dark-color;
    } @else {
        @return $light-color;
    }
    }

  /*-- scss:defaults --*/
  $node-editor-text:              #c7c7c7 !default;
  $node-editor-grid:               #1D1D1D !default;
  $node-editor-backdrop:           #303030 !default;
  $node-type-color-converter:      #246283 !default;
  $node-type-color-color:          #3B660A !default;
  $node-type-color-group:          #3B660A !default;
  $node-type-color-group-socket:   #0F0F0F !default;
  $node-type-color-frame:          #0F0F0F !default;
  $node-type-color-matte:          #973C3C !default;
  $node-type-color-distor:         #4C9797 !default;
  $node-type-color-input:          #83314A !default;
  $node-type-color-output:         #4D0017 !default;
  $node-type-color-filter:         #551A80 !default;
  $node-type-color-vector:         #3C3C83 !default;
  $node-type-color-texture:        #E66800 !default;
  $node-type-color-shader:         #24B524 !default;
  $node-type-color-script:         #084D4D !default;
  $node-type-color-geometry:       #1D715E !default;
  $node-type-color-attribute:      #1D2546 !default;
  $node-type-color-simulation:     #664162 !default;
  $node-type-color-repeat:         #76512F !default;
  
  $node-socket-color-text:         #ffffff !default;
  $node-socket-color-geometry:     #05D19F !default;
  $code-socket-color-int:          #027a2a !default;
  $node-socket-color-vector:       #6363C7 !default;
  $node-socket-color-int:          #598C5C !default;
  $node-socket-color-float:        #A1A1A1 !default;
  $node-socket-color-matrix:       #B83385 !default;
  $node-socket-color-bool:         #CCA6D6 !default;
  $node-socket-color-rotation:     #A663C7 !default;
  $node-socket-color-material:     #EB7582 !default;
  $node-socket-color-color:        #C6C629 !default;
  $node-socket-color-collection:   #f4f4f4 !default;
  $node-socket-color-string:       #70B2FF !default;
  $node-socket-color-object:       #ED9E5C !default;
  
  $h2-font-size:          1.6rem !default;
  $headings-font-weight:  500 !default;
  $color: #e1e1e1 !default;
  $body-font-color:       #e1e1e1 !default;
  // $primary:             $node-type-color-geometry !default;
  $primary:             #265f52;
  $text-dark-color: #2d2d2d;

  $global-background: #1f2128;
  $global-foreground: #262a32;
  $global-highlight: #2a2c3b;
/*-- scss:rules --*/
// h1, h2, h3, h4, h5, h6 {Avec
// text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
// }

h1, h2, h3, h4, h5, h6 {
  color: rgb(242, 242, 242);
}

h2 {
  padding-top: 2rem;
}

body {
color: lighten($node-editor-text, 0.2);
background-color: $global-background;
}

.card {
  --bs-card-bg: rgb(43, 43, 58);
}

pre > code.sourceCode > span {
  color: #e4e4e4;
}

$bs-card-bg: $global-background;

.sourceCode.cell-code {
  color: rgb(154, 154, 154);
  background-color: $global-highlight;

}

code span.im {
  color: lighten($node-type-color-input, 30%);
}

code span.dv {
  color: lighten($node-socket-color-int, 10%);
}


code span.st {
  color: $node-socket-color-string;
}
code span.bu {
  color: orange;
}
code span.du {
  color: $node-socket-color-int;
}
code span.co {
  color: rgb(108, 108, 108);
}

.breadcrumb {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: $global-highlight;
  color: $body-font-color;
  padding: 0.5rem;
}

table {
  border-collapse: collapse;
  vertical-align: middle;
  overflow: hidden; // Add this to ensure rounded corners are visible
  
  th {
    text-align: center;
  }

  th, td {
    border: 1px solid rgb(21, 21, 21);
    
    padding: 10%;
    background-color: $global-highlight;
    color: $node-socket-color-geometry;
  }
  
  tr {
    background-color: $global-foreground;
    color: darken($node-editor-text, 10%);
  }
}

thead.tr {
  background-color: $global-highlight;
  color: white;
}


navbar {
background-color: $body-font-color;
}
nav.sidebar.sidebar-navigation:not(.rollup) {
color: $body-font-color;
background-color: $global-background;
}

// Define the mixin
@mixin code-style($background-color) {
    color: contrast-color($background-color, #c7c7c7, #1b1b1b);
    // color: $text-dark-color;
    // color: #d4d4d4;
    // text-shadow: 1px 1px rgba(32, 32, 32, 0.8);
    text-wrap-mode: nowrap;
    background-color: rgba(darken($background-color, 0%), 0.7);
    padding-left: .4em;
    padding-right: .4em;
    font-weight: bold;
}

body code:not(.sourceCode) {
    padding: 0.2em;
    background-color: rgb(76, 80, 91);
    color: rgb(221, 221, 221);
}

.widget-html-content {
    padding: 0.2em;
    // background-color: rgb(76, 80, 91);
    color: rgb(221, 221, 221);
}


$custom-classes: (
  "float": $node-socket-color-float,
  "int": $node-socket-color-int,
  "vector": $node-socket-color-vector,
  "geometry": $node-socket-color-geometry,
  "matrix": $node-socket-color-matrix,
  "bool": $node-socket-color-bool,
  "rotation": $node-socket-color-rotation,
  "material": $node-socket-color-material,
  "color": $node-socket-color-color,
  "collection": $node-socket-color-collection,
  "string": $node-socket-color-string,
  "object": $node-socket-color-object,
  "name": $node-editor-backdrop,
  "menu": rgb(78, 78, 78),
  "input": $node-type-color-input,
  "attribute": $node-type-color-input
);

@each $keyword, $color in $custom-classes {
    code:not(.sourceCode).custom-#{$keyword} {
      @include code-style($color);
    }
  }