.component-retest-interval {
    --cal-entries-gap: 18px;
    --cal-item-gap: 48px;
    --cal-bar-width: 5px;
    --cal-bullet-size: 20px;
    --cal-date-font-size: 18px;
    --cal-space-left: 84px;

    --cal-bullet-translate-x: calc(var(--cal-space-left) * -1);
    --cal-margin-left: calc(var(--cal-bullet-size) / 2 - var(--cal-bar-width) / 2);
    --cal-bar-translate-x: calc(var(--cal-space-left) / -1 + var(--cal-margin-left));

    @media (width <= 480px) {
        --cal-space-left: 36px;
    }

    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: var(--cal-entries-gap);
    padding: 0 0 0 var(--cal-space-left);

    .calendar-date {
        position: relative;
        z-index: 11;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 12px;
        height: var(--cal-date-font-size);
        transform: translateX(var(--cal-bullet-translate-x));
        font-size: var(--cal-date-font-size);
        line-height: 1;
        font-weight: 400;
        color: var(--color-btm-dark-blue);
        font-family: 'Roboto', sans-serif;

        &:before {
            content: '';
            left: 0;
            width: var(--cal-bullet-size);
            height: var(--cal-bullet-size);
            border-radius: 50%;
            background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.65);
            box-shadow:
                inset 0 0 0 4px #fff,
                0 0 1px 0 rgb(from var(--color-btm-dark-blue) r g b / 0.75)
            ;
        }
    }

    .calendar-entry {
        --cal-bar-top-pos: calc(var(--cal-entries-gap) / -1 + var(--cal-date-font-size) / -2 + var(--cal-entries-gap));
        --cal-bar-top-color: transparent;
        --cal-bar-top-radius: 0;
        --cal-bar-bottom-pos: calc(var(--cal-entries-gap) / -1 + var(--cal-date-font-size) / -2 + var(--cal-entries-gap));
        --cal-bar-bottom-color: transparent;
        --cal-bar-bottom-radius: 0;

        --cal-item-color: var(--color-general-gray);
        --cal-info-color: var(--color-general-gray);
        --cal-color-border: var(--cal-info-color);

        &:first-child {
            --cal-bar-top-pos: calc(50% + 1px);
            --cal-bar-top-color: var(--cal-color-border);
            --cal-bar-top-radius: 12px;
        }
        &:last-child {
            --cal-bar-bottom-pos: calc(50% - 1px);
            --cal-bar-bottom-color: var(--cal-color-border);
            --cal-bar-bottom-radius: 12px;
        }

        &.entry-default {
            --cal-item-color: var(--color-general-gray);
            --cal-info-color: #bfbcbc;
        }
        &.entry-idle {
            --cal-item-color: var(--color-general-blue);
            --cal-info-color: #6e9ed4;
        }
        &.entry-retest {
            --cal-item-color: var(--color-general-green);
            --cal-info-color: #72a485;
        }
        &.entry-grace {
            --cal-item-color: var(--color-general-orange);
            --cal-info-color: #e9af6e;
        }
        &.entry-warning {
            --cal-item-color: var(--color-general-red);
            --cal-info-color: #da7a85;
        }

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        border-radius: 12px;
        background-color: rgb(from #fff r g b / 0.75);
        box-shadow:
            0 0 0 var(--cal-bar-width) var(--cal-info-color),
            0 0 16px 0 rgb(from var(--color-btm-dark-blue) r g b / 0.5)
        ;

        &:before {
            content: '';
            position: absolute;
            top: var(--cal-bar-top-pos);
            left: 0;
            bottom: var(--cal-bar-bottom-pos);
            width: calc(var(--cal-space-left) - var(--cal-margin-left));
            border-radius: var(--cal-bar-top-radius) 0 0 var(--cal-bar-bottom-radius);
            border-left: var(--cal-bar-width) solid var(--cal-color-border);
            border-top: var(--cal-bar-width) solid var(--cal-bar-top-color);
            border-bottom: var(--cal-bar-width) solid var(--cal-bar-bottom-color);
            transform: translateX(var(--cal-bar-translate-x));
        }

        .details-label {
            padding: 8px 16px;
            border-radius: 12px 0 12px 0;
            font-size: 16px;
            line-height: 1;
            font-weight: 600;
            color: #fff;
            background-color: var(--cal-info-color);
            font-family: 'Roboto', sans-serif;
        }

        .details-info {
            padding: 16px;
            font-size: 18px;
            line-height: 1.325;
            font-weight: 400;
            color: var(--color-btm-dark-blue);
            font-family: 'Roboto', sans-serif;
        }
    }
}