@layer jokul.components{.jkl-date-input{anchor-scope:all}.jkl-date-input__wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;max-width:100%;position:relative;display:flex;align-items:center;font:var(--jkl-text-style-text-medium);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;background-color:var(--background-color);color:var(--text-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem #0000}.jkl-date-input__wrapper:focus-within,.jkl-date-input__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-date-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-date-input__wrapper:focus-within,.jkl-date-input__wrapper:has([data-focused=true]),.jkl-date-input__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-date-input__wrapper:focus-within,.jkl-date-input__wrapper:has([data-focused=true]),.jkl-date-input__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-date-input__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-date-input__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-date-input__wrapper>.jkl-text-input-action-button{flex-shrink:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--jkl-text-input-action-button-padding);height:var(--jkl-text-input-action-button-size);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-date-input__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-date-input__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-date-input__wrapper,.jkl-date-input__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}.jkl-date-input__wrapper{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;max-width:18ch;anchor-name:--calendar-trigger}.jkl-date-input input[type=date]{background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-date-input input[type=date]:active,.jkl-date-input input[type=date]:focus,.jkl-date-input input[type=date]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-date-input input[type=date]{border-style:revert}.jkl-date-input input[type=date],.jkl-date-input input[type=date]:active,.jkl-date-input input[type=date]:focus,.jkl-date-input input[type=date]:hover{outline:revert;outline-style:revert}}.jkl-date-input input[type=date] input[type=number]::-webkit-inner-spin-button,.jkl-date-input input[type=date] input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-date-input input[type=date] input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-date-input input[type=date]{outline:none;border:none}.jkl-date-input input[type=date]:focus-visible{outline:none}}.jkl-date-input input[type=date]::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-date-input input[type=date]{height:100%;width:100%;padding:var(--jkl-unit-15);-webkit-padding-end:var(--jkl-unit-15);padding-inline-end:var(--jkl-unit-15);box-sizing:border-box}.jkl-date-input input[type=date]::-webkit-calendar-picker-indicator,.jkl-date-input input[type=date]::-webkit-inner-spin-button{display:none;-webkit-appearance:none}.jkl-date-input input[type=date][data-empty=true]{color:var(--jkl-color-text-subdued)}.jkl-date-input .jkl-calendar{border:none;padding:var(--jkl-unit-40);display:none;position:fixed;width:80svw}.jkl-date-input .jkl-calendar:popover-open{display:block}@media screen and (min-width:600px){.jkl-date-input .jkl-calendar__labels{display:none}.jkl-date-input .jkl-calendar{width:-webkit-max-content;width:max-content;margin-block:var(--jkl-unit-10);margin-left:0;position-anchor:--calendar-trigger;top:anchor(bottom);left:anchor(left);position-try-fallbacks:--fallback-calendar-position}}}@position-try --fallback-calendar-position{bottom:anchor(top);top:unset;margin-top:10px}