.chart
{
  &.bar
  {
    rect#bar-bg // two axis deterimened background is transparent
    {
      opacity: 0;
    }

    g#bar-xgrid line // horizontal lines
    {
      stroke-width: .5;
      stroke: $black-light;

      &:not(:first-child)
      {
        stroke-dasharray: 3;
      }
    }

    g#bar-xaxis text
    {
      fill: $gray-dark;
    }

    g#bar-yaxis text // vertical
    {
      fill: $gray;
      font-size: 0.65em;
    }

    g#points // bar chart
    {
      text
      {
        fill: $white-light;
      }

      g:first-child g // multiple chart first bar
      {
        rect
        {
          fill: $green;
        }

        text.outside
        {
          fill: $green-dark;
        }
      }
    
      g:nth-of-type(2) g
      {
        rect
        {
          fill: $black;
        }

        text.outside
        {
          fill: $black;
        }
      }
    }

    &:not(.rounded)
    {
      #points
      {
        rect
        {
          clip-path: inherit;
        }
      }
    }

    &.yellow
    {
      #points g:first-child g
      {
        rect
        {
          fill: $yellow;
        }

        text.outside
        {
          fill: $yellow;
        }
      }
    }
  }


  &.line
  {
    rect#line-bg // two axis deterimened background is transparent
    {
      opacity: 0;
    }

    g#line-xgrid line // horizontal lines
    {
      stroke-width: .5;
      stroke: $black-light;

      &:not(:first-child)
      {
        stroke-dasharray: 3;
      }
    }

    g#line-xaxis text
    {
      fill: $gray-dark;
    }

    g#line-y2axis text,
    g#line-yaxis text // vertical
    {
      fill: $gray;
      font-size: 0.65em;
    }

    g#points // bar chart
    {
      path
      {
        stroke-width: 4;
        stroke: $gray;
      }

      circle
      {
        stroke-width: 3;
        stroke: $gray;
        fill: $gray-light;
        r: 9,


        // &.fill-red
        // {
        //   fill: $red;
        // }


        // &.helper
        // {
        //   stroke-width: 1;
        //   stroke: $gray;
        //   fill: $gray-light;
        //   r: 3,
        // }
      }

      circle.helper
      {
        stroke-width: 1;
        stroke: $gray;
        fill: $gray-light;
        r: 3,        
      }

      

      text
      {
        fill: $gray;
      }
    }
  }


  &.github
  {
    g#github-xaxis
    {
      text
      {
        font-size: 70%;
        font-weight: bold;
        fill: $gray-dark;
      }
    }

    g#points
    {
      g#weeks,
      g#months
      {
        rect
        {
          &.fill-red
          {
            fill: $red;
          }

          &.fill-gray-light
          {
            fill: $gray-light;
          }

          &.fill-green
          {
            fill: $green;
          }

          &:hover
          {
            stroke: $blue-dark;
            stroke-width: 1;
          }
        }

        text
        {
          font-weight: bold;
        }
      }

      g#separator
      {
        line
        {
          stroke: $gray-light;
        }
      }

    }
  }
}