/**
 * UX2 time field — appjs/common/ux2/timeField.js (skoTimeField). The input keeps its own form-control box; a clock
 * sits on the right and the list of times drops down in the pick-one look (assets/ux2/picker.css, load that first).
 * Loaded on every UX2 page (engine/ux2.php ux2HeadTags); pages add nothing.
 */
.ux2-time {
    position: relative;
    display: block;
    min-width: 0;
}

.ux2-time > input.form-control {
    padding-right: 38px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.ux2-time > input.form-control:focus {
    cursor: text;
}

.ux2-time-ico {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--ux2k-quiet, #8a8fa3);
    transform: translateY(-50%);
    pointer-events: none;
}

.ux2-time.is-open .ux2-time-ico {
    color: var(--ux2k-brand, #1e5f69);
}

.ux2-time > input.is-invalid ~ .ux2-time-ico {
    display: none;
}

.ux2-time .ux2-picker-list {
    right: auto;
    z-index: 1070;
    min-width: max(100%, 168px);
    max-height: 240px;
}

.ux2-time.is-up .ux2-picker-list {
    top: auto;
    bottom: calc(100% + 4px);
}

.ux2-time .ux2-picker-list [role="option"] {
    justify-content: space-between;
    gap: 14px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--ux2k-ink-2, #3f4254);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ux2-time .ux2-picker-list [role="option"][aria-selected="true"] {
    background: none;
    font-weight: 700;
    color: var(--ux2k-brand, #1e5f69);
}

.ux2-time .ux2-picker-list [role="option"].is-active,
.ux2-time .ux2-picker-list [role="option"]:hover {
    background: var(--ux2k-tint, #e9f0f1);
}

.ux2-time .ux2-picker-list small {
    font-size: 12px;
    font-weight: 400;
    color: var(--ux2k-muted, #6b6f85);
}