/* ==========================================================================
   $BASE-TIME-PICKER
   ========================================================================== */
/**
 * The list of times.
 */
.picker__list {
    list-style: none;
    padding: 0 0 0;
    margin: 0;
}
/**
 * The times on the clock.
 */
.picker__list-item {
    /*border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;*/
    margin-bottom: -1px;
    position: relative;
    background: #fff;
    padding: .75em 1.25em;
    text-align: center;
}

/* Hovered time */
.picker__list-item:hover {
    cursor: pointer;
    color: var(--bs-primary);
    background: var(--bs-pale-primary);
    z-index: 10;
}
/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
    z-index: 10;
}

    .picker__list-item--highlighted:hover,
    .picker--focused .picker__list-item--highlighted {
        cursor: pointer;
        color: var(--bs-primary);
        background: var(--bs-pale-primary);
    }
/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
    color: var(--bs-primary);
    background: var(--bs-pale-primary);
    z-index: 10;
}
/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #ddd;
    cursor: default;
    border-color: #ddd;
    z-index: auto;
}
/**
 * The clear button
 */
.picker--time .picker__button--clear {
    display: block;
    width: 100%;
    padding: 1.35em 1.25em;
    background: none;
    border: 0;
    font-weight: 500;
    font-size: .67em;
    text-align: center;
    text-transform: uppercase;
    color: #666;
}

    .picker--time .picker__button--clear:hover,
    .picker--time .picker__button--clear:focus {
        background: var(--bs-red);
        border-color: var(--bs-red);
        cursor: pointer;
        color: #fff;
        outline: none;
    }

    .picker--time .picker__button--clear:before {
        top: -0.25em;
        color: var(--bs-red);
        font-size: 1.25em;
        font-weight: bold;
    }

    .picker--time .picker__button--clear:hover:before,
    .picker--time .picker__button--clear:focus:before {
        color: #fff;
        border-color: #fff;
    }

/* ==========================================================================
   $CLASSIC-TIME-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should __NOT__ be styled
 * more than what’s here. Style the `.picker__holder` instead.
 */
.picker--time {
    min-width: 256px;
    max-width: 320px;
}
    /**
 * The holder is the base of the picker.
 */
    .picker--time .picker__holder {
        background: #f2f2f2;
    }

@media (min-height: 40.125em) {
    .picker--time .picker__holder {
        font-size: .875em;
    }
}
/**
 * The box contains the list of times.
 */
.picker--time .picker__box {
    padding: 0;
    position: relative;
}