@import "./mixin.less";

@stat-day-L1-bg: #9be9a8;
@stat-day-L2-bg: #40c463;
@stat-day-L3-bg: #30a14e;
@stat-day-L4-bg: #216e39;

.usage-heat-map-wrapper {
  .flex(row, flex-start, center);
  @apply w-full h-32 flex-wrap pr-6 pb-3;

  > .day-tip-text-container {
    @apply w-6 h-full grid grid-rows-7;

    > .tip-text {
      @apply pr-1 w-full h-full text-right font-mono text-gray-400;
      font-size: 10px;
    }
  }

  > .usage-heat-map {
    @apply h-full grid grid-rows-7;
    width: 200px;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: column;

    > .stat-container {
      @apply block rounded-sm;
      width: 14px;
      height: 14px;
      background-color: @bg-lightgray;
      margin-bottom: 2px;

      &.null {
        @apply bg-transparent;
      }

      &.stat-day-L1-bg {
        background-color: @stat-day-L1-bg !important;
      }

      &.stat-day-L2-bg {
        background-color: @stat-day-L2-bg !important;
      }

      &.stat-day-L3-bg {
        background-color: @stat-day-L3-bg !important;
      }

      &.stat-day-L4-bg {
        background-color: @stat-day-L4-bg !important;
      }

      &.today {
        border: 1px solid black;
      }
    }
  }

  > .usage-detail-container {
    @apply absolute left-0 top-0 ml-2 -mt-9 p-2 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2;

    > .date-text {
      @apply text-gray-300;
    }

    &::before {
      content: "";
      position: absolute;
      bottom: -4px;
      left: calc(50% - 5px);
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid rgba(0, 0, 0, 0.8);
    }
  }
}