/*
 *  tb-hours-now
 *  (Opening times summary/preview)
 */
.tb-hours-now {
    text-align: left;
    color: config('colors.grey-darkest');
}

.tb-hours-now__toggle-icon {
    margin-left: config('margin.1');
}

.tb-hours-now__state {
    font-weight: bold;
    display: inline-block;
}

.tb-hours-now__state--open {
    color: config('colors.positive');
}

.tb-hours-now__state--closed {
    color: config('colors.negative');
}

.tb-hours-now__state--changes-soon {
    color: config('colors.orange');
}

.tb-hours-now__info-line {
    display: inline-block;
    margin-right: config('margin.1');
}

.tb-teaser .tb-hours-now__info-line {
    display: block;
    margin-right: 0;
}

/*
 *  tb-hours-detail
 *  (Opening times on next 7 days)
 */
.tb-hours-detail {
    margin-top: config('margin.6');
}

.tb-hours-detail__title {}

.tb-hours-detail__body {
    margin-top: config('margin.3');
    list-style: none;
    padding: 0;
}

.tb-hours-detail__item {
    display: flex;
    font-size: config('textSizes.sm');
}

.tb-hours-detail__item + .tb-hours-detail__item {
    padding-top: config('margin.3');
    margin-top: config('margin.3');
    border-top: 1px solid config('colors.grey-lighter');
}

.tb-hours-detail__item-day, .tb-hours-detail__item-date {
    flex: 1;
    max-width: 125px;
}

.tb-hours-detail__item-ranges {
    list-style: none;
    padding: 0;
    flex: 1;
}

.tb-hours-detail__item-range {
    display: block;
}

.tb-hours-detail__item-range + .tb-hours-detail__item-range {
    margin-top: config('margin.2');
}

.tb-hours-detail__item-range-comment {
    color: config('colors.grey-dark');
}

@screen sm {
    .tb-hours-detail__item {
        font-size: config('textSizes.base');
    }

    .tb-hours-detail__item-range {
        display: flex;
    }

    .tb-hours-detail__item-range-value {
        width: 50%;
        max-width: 150px;
        flex: none;
    }

    .tb-hours-detail__item-range-comment {
        flex: 1;
        color: config('colors.grey-darkest');
    }
}

.tb-hours-detail__item-range-value--closed {
    color: config('colors.negative');
}

// Wrapper for v-calendar (vue datepicker)
.tb-hours-date-picker {
    width: 100%;
    max-width: 258px; // width of the picker popover
    margin-top: config('margin.4');

    .vc-container {
        font-family: inherit;
    }

    .vc-highlight {
        background-color: config('colors.primary');
    }

    .vc-weekday {
        color: config('colors.grey-dark');
    }
}
