.usage-heat-map-wrapper {
  @apply flex flex-row justify-start items-center w-full h-32 flex-wrap pr-6 pb-3 shrink-0;

  > .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-wrapper {
      > .stat-container {
        @apply block rounded-sm bg-gray-200 dark:bg-zinc-700;
        width: 14px;
        height: 14px;

        &.stat-day-l1-bg {
          @apply bg-green-400 dark:bg-green-500;
        }

        &.stat-day-l2-bg {
          @apply bg-green-500 dark:bg-green-600;
        }

        &.stat-day-l3-bg {
          @apply bg-green-600 dark:bg-green-700;
        }

        &.stat-day-l4-bg {
          @apply bg-green-700 dark:bg-green-800;
        }

        &.today {
          @apply border border-black dark:border-gray-400;
        }
      }
    }
  }
}

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

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

  &.offset-left {
    &::before {
      left: calc(10% - 5px);
    }
  }

  &::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);
  }
}