.wbk_recurring_list_item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #edeff2;
    border-left: 3px solid transparent;
    font-size: 14px;
    line-height: 1.4;

    &:last-child {
        border-bottom: none;
    }

    &__number {
        flex-shrink: 0;
        font-weight: 600;
        color: #333;
    }

    &__content {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
    }

    &__datetime {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    &__date {
        flex: 0 0 10rem;
        min-width: 10rem;
        max-width: 10rem;
        color: #333;
        font-weight: 500;

        @media screen and (max-width: 768px) {
            flex: 0 0 8rem;
            min-width: 3rem;
            max-width: 6rem;
        }
    }

    &__time {
        flex: 1 1 auto;
        min-width: 0;
        color: #333;
    }

    &__status {
        color: #999;
        font-style: italic;
    }

    &__badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 6px;
        background-color: #fff3e0;
        color: #e65100;
        font-size: 12px;
    }

    &__choose-link {
        background: none;
        border: none;
        padding: 0;
        color: #2271b1;
        cursor: pointer;
        font-size: 13px;
        text-decoration: underline;
        text-align: left;

        &:hover {
            color: #135e96;
        }
    }

    &__alt-select {
        margin-top: 4px;
        padding: 6px 8px;
        border: 1.5px solid #edeff2;
        border-radius: 6px;
        font-size: 13px;
        max-width: 100%;
    }

    &__remove {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        border-radius: 4px;
        background: transparent;
        cursor: pointer;
        color: #668091;
        transition: color 0.2s ease, background-color 0.2s ease;

        svg {
            width: 12px;
            height: 12px;
        }

        &:hover {
            color: #b32d2e;
            background-color: #fcf0f1;
        }
    }

    &--available {
        border-left-color: #2e8b57;

        .wbk_recurring_list_item__number,
        .wbk_recurring_list_item__date,
        .wbk_recurring_list_item__time {
            color: #2e8b57;
        }
    }

    &--adjusted {
        border-left-color: #e67e22;

        .wbk_recurring_list_item__number,
        .wbk_recurring_list_item__date,
        .wbk_recurring_list_item__time {
            color: #e67e22;
        }
    }

    &--unavailable {
        border-left-color: #d63638;

        .wbk_recurring_list_item__number,
        .wbk_recurring_list_item__date,
        .wbk_recurring_list_item__status {
            color: #d63638;
        }
    }
}