.date-field { display: block; margin-bottom: 16px; min-width: 0 }
.date-field > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px }
.date-field > small { display: block; margin-top: 6px; color: var(--faint); font-size: 11px }

.date-control {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .18s, box-shadow .18s;
}

.date-control:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft) }

.date-control input[data-date-input] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 10px 0 10px 13px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    color: var(--ink);
    font: 13px/1.6 var(--sans);
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}

.date-control input[data-date-input]:focus { box-shadow: none }

:root[data-theme="light"] .date-control input[data-date-input] { color-scheme: light }
:root[data-theme="dark"] .date-control input[data-date-input] { color-scheme: dark }

.date-control input[data-date-input]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .72 }

/* 自定义日历按钮可用时隐藏浏览器原生日历图标。 */
.date-control.has-picker input[data-date-input]::-webkit-calendar-picker-indicator { display: none }

.date-control-open {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}

.date-control-open:hover { background: var(--surface-muted); color: var(--pink-dark) }

.date-control-now {
    flex: none;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font: 11px var(--sans);
    cursor: pointer;
    transition: border-color .18s, color .18s;
}

.date-control-now:hover { border-color: var(--pink); color: var(--pink-dark) }
.date-control-open[hidden], .date-control-now[hidden] { display: none }