svg {

  &[id^='geo-s2-cells-'] {
    max-width: 250px;
    .geo-cell{fill:rgba($svg-geo-s2-cell, 0.25);stroke:$svg-geo-s2-cell;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
  	.geo-region{fill:rgba($svg-geo-region, 0.35);stroke:$svg-geo-region;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
  	.geo-point{fill:$svg-geo-point;}
  }

  &#timed-moving-average {
    margin: 1rem 0 3rem;
    max-width: 425px;
    .st0 {stroke: $article-text;}
    .st1 {fill: $article-text;}
    .st2 {font-family: $proxima; font-weight: $medium}
  }

  //////////////////////////////// Join Diagram ////////////////////////////////
  &#join-diagram {
    $fill-color: rgba($article-text, .35);
    display: block;
    max-width: 250px;
    margin: 1rem 0 2rem;

    &.center {margin: 0 auto 2rem auto;}
    &.small {max-width: 125px; path{stroke-width: 3;} }

    path {
      stroke: $article-text;
      stroke-width:2;
      stroke-miterlimit:10;
      fill: none;
    }
    &.inner {path { &#center {fill:$fill-color; }}}
    &.left {path { &#left, &#center {fill:$fill-color; }}}
    &.right {path { &#center, &#right {fill:$fill-color; }}}
    &.full {path { &#left, &#center, &#right {fill:$fill-color; }}}
  }

  ////////////////// InfluxDB v3 storage architecture diagram //////////////////
  
  &#influxdb-v3-storage-architecture {
    margin: 2rem 0 3rem;
    max-width: 750px;

    .shape {
      fill:none;
      stroke: $article-text;
      stroke-width: 1.5;
      stroke-miterlimit :10;
      
      &.op70 {opacity: 0.7}
      &.op50 {opacity: 0.5}
      &.op25 {opacity: 0.25}

      &.dashed {
        stroke-width: 1;
        stroke-dasharray:4,3;
      }
    }
    .title {
      fill: $product-enterprise;
      font-weight: $medium;
      font-size:20px;
    }
    .text {
      fill: $article-text;
      font-size: 18px;
      &.small {font-size: 16px;}
      &.bold {
        font-weight: $medium;
        color: $article-bold;
      }
      &.italic {font-style: italic;}
    }
    .diagram-line {
      fill: none;
      stroke: $nav-active;
      stroke-width: 1.5;
      stroke-miterlimit: 10;
      &.dashed {stroke-dasharray:2,4;}
    }
    .arrow {fill: $nav-active;}
  }
}

@include media(small) {
  svg {
    &#join-diagram {margin: 1rem auto 2rem; }
  }
}

//////////////////////////// Styles for SVG legends ////////////////////////////

span.key-geo-cell {
  display: inline-block;
  vertical-align: middle;
  margin: 0 .5rem .25rem 0;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid $svg-geo-s2-cell;
  background: rgba($svg-geo-s2-cell, .25);
  border-radius: 2px;
}
span.key-geo-region {
  display: inline-block;
  vertical-align: middle;
  margin: 0 .5rem .25rem 0;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid $svg-geo-region;
  background: rgba($svg-geo-region, .35);
  border-radius: 2px;
}
span.key-geo-point {
  display: inline-block;
  margin: 0 .7rem 0 .25rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: $svg-geo-point;
}