/*
 * react-calendar-heatmap styles
 *
 * All of the styles in this file are optional and configurable!
 * The github and gitlab color scales are provided for reference.
 */

 .react-calendar-heatmap text {
    font-size: 10px;
    fill: #1f1f1f;
  }
  
  .react-calendar-heatmap .react-calendar-heatmap-small-text {
    font-size: 5px;
  }
  
  .react-calendar-heatmap rect:hover {
    stroke: #555;
    stroke-width: 1px;
  }
  
  /*
   * Default color scale
   */
  
  .react-calendar-heatmap .color-empty {
    fill: #a8a8a88a;
  }
  
  .react-calendar-heatmap .color-filled {
    fill: #65ac36;
  }
  
  /*
   * Github color scale
   */
  
  .react-calendar-heatmap .color-box-0 {
    fill: #a8a8a88a;
  }
  .react-calendar-heatmap .color-box-1 {
    fill: #ce5a5a;
  }
  .react-calendar-heatmap .color-box-2 {
    fill: #4d812a;
  }
  .react-calendar-heatmap .color-box-3 {
    fill: #4097a3;
  }
  .react-calendar-heatmap .color-box-4 {
    fill: #0f9e19;
  }
  

  /* Desktop / larger screens */
#heatmap-scroll-outer {
  width: 100%;
  overflow-x: unset;
  padding-bottom: 1rem;
}

#heatmap-scroll-inner {
  width: 100%; 
}

/* Small screens (Tablet & below) */
@media (max-width: 768px) {
  #heatmap-scroll-outer {
    overflow-x: auto;
  }

  #heatmap-scroll-inner {
    width: max-content;
    min-width: 800px;
  }

  .react-calendar-heatmap rect {
    width: 10px;
    height: 10px;
  }

  .react-calendar-heatmap text {
    font-size: 6px;
  }
}

/* Mobile (Extra small) */
@media (max-width: 480px) {
  #heatmap-scroll-inner {
    min-width: 700px;
  }

  .react-calendar-heatmap rect {
    width: 8px;
    height: 8px;
  }

  .react-calendar-heatmap text {
     font-size: small;
  }
}
