.lds-date-label {
    display: block;
    font-weight: 600;
}

/* Metrics mirror .client-page.new-ui .input-placeholder .form-control (form.css:3266)
   so a date field sits at the same 2.125rem height as every other input. */
.lds-date-field {
    position: relative;
    display: flex;
    align-items: center;
    direction: ltr;
    height: 2.125rem;
    padding: 6px 36px 6px 12px;
    border: none;
    border-radius: var(--input-border-radius);
    background-color: var(--lds-brand-color-background-lighter);
    color: var(--lds-color-font-base);
    font-family: var(--lds-primary-font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0.015625rem;
    font-variant-numeric: tabular-nums;
    cursor: text;
}

.rtl .lds-date-field {
    padding: 6px 12px 6px 36px;
}

.lds-date-field:hover {
    background-color: var(--lds-brand-color-background-darker);
}

.lds-date-field:focus-within {
    outline: 2px solid var(--lds-brand-color-primary);
    outline-offset: 2px;
}

.lds-date-field[aria-invalid="true"] {
    border-bottom: 1px solid var(--lds-color-warn-main);
}

.lds-date-seg {
    padding: 0 0.12em;
    border-radius: 2px;
}

.lds-date-seg.is-empty {
    color: var(--lds-color-font-weak);
}

/* Keeps the field's own font-on-background pair, which the design system guarantees at 4.5:1.
   Tinting with the tenant's brand colour would put 1.4.3 at the mercy of whatever they configured,
   and this is the state a keyboard user occupies for the whole interaction. The ring carries the
   locating job, so the cue is not colour alone either (1.4.1). */
.lds-date-seg:focus {
    outline: 2px solid var(--lds-brand-color-primary);
    outline-offset: 0;
    background: var(--lds-brand-color-background-darker);
    color: var(--lds-color-font-base);
}

.lds-date-sep {
    color: var(--lds-color-font-weak);
}

/* An attribute selector matches class specificity, so a bare class loses to
   input[type="date"] and the delegate stretches over the whole field. */
input.lds-date-delegate[type="date"] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.rtl input.lds-date-delegate[type="date"] {
    right: auto;
    left: 4px;
}

input.lds-date-delegate[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* Touch has no keyboard to summon for a spinbutton span, so the whole field opens
   the OS picker instead of only the icon. Screen readers are unaffected: they walk
   the accessibility tree, where the delegate is aria-hidden and the segments remain
   focusable and adjustable by swipe. */
@media (hover: none) and (pointer: coarse) {
    .lds-date-field {
        cursor: pointer;
    }

    input.lds-date-delegate[type="date"],
    .rtl input.lds-date-delegate[type="date"] {
        inset: 0;
        right: auto;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 100%;
    }
}

.lds-date-calendar {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--lds-color-icon-base);
    cursor: pointer;
}

.rtl .lds-date-calendar {
    right: auto;
    left: 4px;
}

.lds-date-field:hover .lds-date-calendar {
    color: var(--lds-brand-color-primary);
}

.lds-date-calendar:focus-visible {
    outline: 2px solid var(--lds-brand-color-primary);
    outline-offset: 1px;
}


/* Mirrors the read-only text input at form.css:4089-4098, whose selectors no longer reach
   this field. */
.lds-date-field[aria-disabled="true"] {
    background-color: var(--lds-brand-color-background-lighter);
    color: var(--lds-color-font-weak);
    cursor: default;
}

.lds-date-field[aria-disabled="true"]:hover {
    background-color: var(--lds-brand-color-background-lighter);
}

.lds-date-field[aria-disabled="true"] .lds-date-calendar {
    display: none;
}

@media (forced-colors: active) {
    /* A real .form-control keeps its border here; a div does not, so the field would have
       no boundary at all (1.4.11). */
    .lds-date-field {
        border: 1px solid CanvasText;
    }

    .lds-date-seg:focus {
        background: Highlight;
        color: HighlightText;
    }
}