:root {
    --column-width: 12rem;
}

.bookings-container {
    margin-top: calc(var(--pill-gap));
    background-color: var(--white-bg);
    display: flex;
    flex: 0 0 auto; /* don’t shrink */
    width: max-content; /* grow to content width */
    padding: calc(2 * var(--pill-gap));
    border-radius: calc(var(--pill-h)/2 + var(--pill-gap));
}

.bookings-view-header {
    display:flex;
    flex-direction: column;
}

.bookings-view-btns {
    display: flex;
    align-items: center;
}

    .bookings-view-btns > strong {
        margin-left: calc(var(--pill-gap) * 4);
        margin-right: var(--pill-gap);
    }

    .bookings-view-btns > .btn-input {
        margin:0;
        width: var(--input-h);
        transition: background-color ease-in-out 0.2s;
    }

        .bookings-view-btns > .btn-input:active {
            background-color: var(--dark-gray-bg)
        }

    .bookings-view-btns > input[type=date] {
        width: calc(var(--input-h) * 3.5);
        /* Specify left and right seperate to not overwrite the default top and btm */
        margin-left: var(--pill-gap);
        margin-right: var(--pill-gap);
    }

.bookings-view-legend {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--pill-gap));
}

.bookings-view-legend-item {
    display: flex;
    align-items: center;
    margin: var(--pill-gap) 0;
    gap: var(--pill-gap);
}

.legend-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.legend-icon-booked {
    background: var(--primary-color-2);
    background: linear-gradient(135deg,var(--primary-color-2) 15%, var(--primary-color-1) 50%, var(--primary-color-3) 100%);
}

.legend-icon-recurring {
    background: #3FD4AA;
    background: linear-gradient(135deg,rgba(63, 212, 170, 1) 0%, rgba(55, 195, 181, 1) 100%);
}