.bar-chart {
    container-type: inline-size;
    container-name: bar-chart;
}

.chart {
    display:grid;
    grid-gap:1px;
    border-radius:0.5em;
    position:relative;
    height:145px;
    border:0;
}

.stats .hours,
.stats .stats-days {
    border:1px solid #ddd;
    border-radius:1em;
    margin-bottom:5em;
}

    .x-axis {
        display:grid;
        grid-gap:1px;
        height:30px;
        padding:0 2em 2em 2em;
    }

        .x-axis p{
            text-align: center;
            margin:0;
            line-height:1;
        }

.chart > div {
    position:relative;
    display:grid;
    grid-template-rows: 1fr 1.5em;
    grid-gap:5px;
    transition:background-color 0.5s ease;
}

    .timeperiod {
        position:relative;
    }

    .bar {
        position:absolute;
        width:calc(100% - 6px);
        left:3px;
        bottom:0;
        background-color:var(--blue);
        border-radius:1rem 1rem 0 0;
        transition:background-color 0.5s ease;
    }

    .chart > div:hover {
        background-color:#fff1;
        border-radius:3px;
    }

        .timeperiod:hover .bar {
            background-color:var(--beige);
        }

        .chart > div:hover p.day {
            color:var(--beige);
        }

    .month,
    .day {
        border-left:1px solid var(--bgblue);
    }

    .bar.now {
        opacity:0.6;
    }

    .hover {
        display: none;
        position: absolute;
        bottom:calc(100% + 0.5em);
        background-color:var(--darkblue);
        border:1px solid var(--blue);
        border-radius:0.5em;
        padding:0.25em;
        text-align: center;
        left:50%;
        width:120px;
        transform:translateX(-50%);
        z-index:10;
    }

        .hover p {
            margin:0;
            font-size:0.8rem;
            line-height:1;
        }

    .timeperiod:hover .hover {
        display:block;
        line-height: 1;
    }

    .monthlabel {
        position:absolute;
        font-size:1.1em;
        margin-left:0.25em;
        line-height:1;
        z-index:1;
    }

    .chart .day {
        color:var(--blue);
        width:100%;
        text-align: center;
        font-size:0.55rem;
        border-left:0;
        margin:0;
        line-height:1;
        transition:color 0.5s ease;
    }

        .chart .day.first {
            border-left:1px solid var(--bgblue);
        }

@container bar-chart (width < 450px) {
    .chart > div:nth-of-type(odd) .day {
        display:none;
    }
}