// ---------------------------
// MIXINS
// ---------------------------

@mixin background-svg($width, $height, $svg, $aspect: xMidYMid) {
  background-image: url('data:image/svg+xml;base64,' + base64encode('<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}px" height="#{$height}px" viewBox="0 0 #{$width} #{$height}" preserveAspectRatio="#{$aspect}">#{$svg}</svg>'));
}


// ---------------------------
// GLOBAL STYLES
// ---------------------------

html {
  height: 100%;
  font-size: $remSize;
  background: $bodyBg;
}

body {
  color: $bodyFg;
  min-height: 100%;
  position: relative;
  text-align: center;
  background: $bodyBg;
  min-width: $widthMin;
  box-sizing: border-box;
  padding-bottom: $footerHeight;
  text-rendering: optimizeLegibility;
  font: normal #{$fontSize}/#{$lineHeight} $fontFamily;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

h1, h2, h3, h4, h5 {
  line-height: 1.1;
  font-weight: normal;
  margin: 1em 0 0.5em 0;
  font-family: $fontFamilyHead;
  &:first-child { margin-top: 0; }
}

.h1, .h2, .h3, .h4, .h5 {
  margin: 0;
  font-family: $fontFamilyHead;
}

h1, .h1 {
  color: $fgH1;
  margin-top: 0;
  font-size: $fontSizeH1;
}

h2, .h2 {
  color: $fgH2;
  font-size: $fontSizeH2;
}

h3, .h3 {
  color: $fgH3;
  font-size: $fontSizeH3;
}

h4, .h4 {
  color: $fgH4;
  font-size: $fontSizeH4;
}

h5, .h5 {
  color: $fgH5;
  font-size: $fontSizeH5;
}

small, .small {
  font-weight: inherit;
  font-size: $fontSizeSmall;
}

big, .big {
  font-weight: inherit;
  font-size: $fontSizeBig;
}

strong, .strong {
  font-weight: inherit;
  font-size: $fontSizeStrong;
}

p {
  margin: 1em 0;
  line-height: inherit;
}

a {
  color: $fgLink;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s, background-color 0.15s;
  &:hover { color: $fgHover; }
}

hr {
  height: 0;
  padding: 0;
  clear: both;
  margin: 1.5em 0;
  border-style: solid;
  border-width: 1px 0 0 0;
  border-color: $borderColor;
  &.dotted { border-style: dotted; }
  &.dashed { border-style: dashed; }
}

svg {
  width: 100%;
  height: 100%;
}

code {
  color: #555;
  font-size: 75%;
  padding: 0 0.3em;
  border-radius: 3px;
  line-height: 1.8333;
  display: inline-block;
  background: mix(#000, $bodyBg, 3);
  box-shadow: inset 0 0 0 1px rgba(#000, 0.08);
}

mark {
  font-weight: bold;
  text-decoration: underline;
}

.tabular {
  table {
      border-collapse: collapse;
  }
  
  table, th, td {
     border: 1px solid black;
     padding: 0 0.3em;    
  }   

  th { 
    border-bottom: 2px;
  }
  
  .bang {
    th {
      display: none;
    }
  }


}

.depth2{
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.1em;
}
.depth3 {
  font-weight: bold;
}
.depth4 {
  text-decoration: underline;
}
.depth5 {
  font-style: italic;
}
.depth6 {}

.rtl {
  p {text-align: right;}
  p.settings {
    direction: ltr;
    text-align: left;
    }
  label {
    margin-left: 5px;
    margin-right: 5px;
  }
}

p.rtl, h4.rtl, td.diff-version.rtl {
  text-align: right;
}


.gap {
  font-style: italic;  
}

.unclear {
  font-style: italic;  
}

.cb {
  font-style: italic;  
}

.pb {
  font-style: italic;  
}

.stamp {
  font-style: italic;    
}

.marginalia {
  font-style: italic;    
}

.expanded-abbreviation {
  font-style: italic;    
}

.highlighted {
  background-color: yellow;  /* Set the desired background color for highlighting */
}
