/*
 *  tb-hours-now
 *  (Opening times summary/preview)
 */
.tb-hours-now {
    text-align: left;
    color: theme('colors.gray.900');
}

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

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

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

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

.tb-hours-now__state--changes-soon {
    color: theme('colors.warning.500');
}

.tb-hours-now__info-line {
    display: inline-block;
    margin-right: theme('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: theme('margin.6');
}

.tb-hours-detail__title {}

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

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

.tb-hours-detail__item + .tb-hours-detail__item {
    padding-top: theme('margin.3');
    margin-top: theme('margin.3');
    border-top: 1px solid theme('colors.gray.200');
}

.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: theme('margin.2');
}

.tb-hours-detail__item-range-comment {
    color: theme('colors.gray.600');
}

@screen sm {
    .tb-hours-detail__item {
        font-size: theme('fontSize.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: theme('colors.gray.900');
    }
}

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

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

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

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

    .vc-weekday {
        color: theme('colors.gray.600');
    }
}

.tb-hours-simple__open {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background-color: theme('colors.positive.500');
}

.tb-hours-simple__closed {
    width: .75rem;
    height: .75rem;
}

.tb-hours-simple__closed-icon {
    width: 100%;
    color: theme('colors.negative.500');
}
