:root
{
    --sz_sickness_first_col: 50px;
}
.sickness
{
    display: grid;
    position: relative;
    grid-template-columns: var(--sz_sickness_first_col) 1fr var(--sz_icons);
    height: var(--sz_icons);
    margin-bottom: calc(2 * var(--sz_margin) );
    background-color: var(--color_bg);
    border-radius: calc(3 * var(--sz_margin));
}
.sickness.done
{
    grid-template-columns: var(--sz_sickness_first_col) 1fr;
    background-color: var(--color_gray_lt);
}
    .sickness > *
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sickness > .day
    {
        background-color: red;
        color: white;
        border-top-left-radius: calc(3 * var(--sz_margin));
        border-bottom-left-radius: calc(3 * var(--sz_margin));
        position: relative;
    }
        .sickness > .day:before
        {
            content: attr(data-days);
            font-size: 1.5em;
            position: absolute;
            top: 3px;
            left: 50%;
            transform: translatex(-50%);
        }
        .sickness > .day:after
        {
            content: "day(s)";
            font-size: 0.8em;
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translatex(-50%);
        }
        .sickness.done > .day
        {
            background-color: var(--color_gray);
        }
    .sickness > :nth-child(2)
    {
        background-color: var(--color_bg);
    }
    .sickness > :nth-child(3)
    {
        /* get well */
        display: flex;
        position: relative;
        background-color: var(--color_blue);
        border-radius: 50%;
        color: white;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 0.8em;
    }
        .ssickness > :nth-child(3):before
        {
            content: "😄";
            top: 3px;
            position: absolute;
            display: flex;
            left: 50%;
            transform: translateX(-50%);
        }
        .ssickness > :nth-child(3):after
        {
            content: "Mark Well";
            bottom: 3px;
        }