$hmbloksizeH:13px;
$dayGap:1px;
$heatFont:Georgia,"Nimbus Roman No9 L","Songti SC",STSong,"AR PL New Sung","AR PL SungtiL GB",NSimSun,SimSun,"TW\-Sung","WenQuanYi Bitmap Song","AR PL UMing CN","AR PL UMing HK","AR PL UMing TW","AR PL UMing TW MBE",sans-serif;

.heatmap{
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  max-width: 640px;
}

.heatmap-title{
  color: $color-black;
  font-size: 1.6rem;
  font-weight: 600;
  padding:3rem 0rem 0.2rem 0;
}
 
 
.heatmap-month{
  
  grid-column-start: 2;
  grid-column-end: 3;

  display: grid;
  grid-template-columns: repeat(12,1fr);

  border: $dbgBorder;
  
}

 
.heatmap-month-cell{
  display: flex;
  align-items: center;
  justify-content: center;

  font-family:  $heatFont;
  font-size: 0.8rem;

  height: 12px;

  padding: 0.2em 0;
  
}


.heatmap-week{
  
  grid-row-start: 2;
  grid-row-end: 3;
  display: grid;
  // grid-template-rows:repeat(4,1fr);
  

  grid-auto-flow: row;
  height: $hmbloksizeH * 7  + $dayGap * 6;
}
 

.heatmap-week-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 0.2em;
  font-size: 0.8rem;
  font-family:  $heatFont
}

.heatmap-day{

  display: grid;
  grid-template-columns: repeat(53,1fr);
  grid-template-rows: repeat(7,1fr);
  grid-auto-flow: column;
  gap: $dayGap;
}

.heatmap-day-cell{

  border-radius: 2px;
  // height: 20px;
  // width: $hmbloksizeW;
  height: $hmbloksizeH;
}

.heatmap-day-cell a{
  height: 100%;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow:hidden;
}


.hm-check-nodata{
  background-color: #93d5dc;
}

.hm-check{
  background-color: #40c463bb;
  position: relative;
  cursor: pointer;
}

.hm-check2{
  background-color: #40c463ff;
  position: relative;
}

.hm-check-no-a{
  background-color: #edebf0;;
}


.hm-check-no-b{
  background-color: #edebf0aa;
}

.heatmap-day-cell:hover{
  transform: scale(1.3);
  z-index: 999;
}

.heatmap-day-cell:hover .hm-tip{
  display: block;
}

.hm-tip{
  position: absolute; /* 让子元素浮动 */
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 999;

  width: auto;
  font-size: 0.8rem;
  display: none;
}

.hm-date{
  color: #fff;
  text-align: center;

  padding: 0;
}

.hm-title{
  color: #fff;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align: left;
  padding-left:0.5rem;

  max-width: 600px;
  
}

.hm-tiplink{
  padding: 0.2rem 0;
}

.red{
  background-color: #ee5500;
}

.border{
  border:solid 1px red;
}