@charset "UTF-8";
.tl-datetime {
  --datetime-background-primary: var(--color-background-layer-01);
  --datetime-background-secondary: var(--color-background-layer-02);
  --datetime-background: var(--datetime-background-primary);
  --datetime-text: var(--color-foreground-text-strong);
  --datetime-icon: var(--color-foreground-icon-strong);
  --datetime-placeholder: var(--color-foreground-text-subtle);
  --datetime-background-disabled-primary: var(--color-background-layer-01);
  --datetime-background-disabled-secondary: var(--color-background-layer-02);
  --datetime-background-disabled: var(--datetime-background-disabled-primary);
  --datetime-text-disabled: var(--color-foreground-text-disabled);
  --datetime-placeholder-disabled: var(--color-foreground-text-disabled);
  --datetime-label-disabled: var(--color-foreground-text-disabled);
  --datetime-icon-disabled: var(--color-foreground-text-disabled);
  --datetime-label: var(--color-foreground-text-strong);
  --datetime-label-inside: var(--color-foreground-text-strong);
  --datetime-placeholder-focus: var(--tds-grey-500);
  --datetime-highlight-bar: var(--color-foreground-border-accent-focus);
  --datetime-helper: var(--color-foreground-text-defined);
  --datetime-helper-error: var(--color-system-danger-default);
  --datetime-icon-error: var(--color-system-danger-default);
}
.tl-datetime--primary {
  --datetime-background: var(--datetime-background-primary);
  --datetime-background-disabled: var(--datetime-background-disabled-primary);
}
.tl-datetime--secondary {
  --datetime-background: var(--datetime-background-secondary);
  --datetime-background-disabled: var(--datetime-background-disabled-secondary);
}

.tl-datetime,
.scania .tl-datetime {
  /* Datetime: units */
  --datetime-border-radius: 4px 4px 0 0;
  /* Datetime: box-shadow */
  --datetime-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
  --datetime-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
  --datetime-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
  --datetime-box-shadow-disabled: none;
  --datetime-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
  --datetime-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
  --datetime-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
  --datetime-highlight: var(--datetime-highlight-bar);
  --datetime-highlight-error: var(--color-system-danger-default);
  /* Datetime: border colors */
  --datetime-border-color-left: transparent;
  --datetime-border-color-right: transparent;
  --datetime-border-color-bottom: var(--color-foreground-border-soft);
  --datetime-border-color-top: transparent;
  /* Datetime: border colors on hover */
  --datetime-border-color-left-hover: transparent;
  --datetime-border-color-right-hover: transparent;
  --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
  --datetime-border-color-top-hover: transparent;
  /* Datetime: border colors on success */
  --datetime-border-color-left-success: transparent;
  --datetime-border-color-right-success: transparent;
  --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
  --datetime-border-color-top-success: transparent;
  /* Datetime: border colors on focus */
  --datetime-border-color-left-focus: transparent;
  --datetime-border-color-right-focus: transparent;
  --datetime-border-color-bottom-focus: var(--color-foreground-border-strong);
  --datetime-border-color-top-focus: transparent;
  --datetime-outline-color-focus: none;
  /* Datetime: border colors on error */
  --datetime-border-color-left-error: transparent;
  --datetime-border-color-right-error: transparent;
  --datetime-border-color-bottom-error: var(--color-system-danger-default);
  --datetime-border-color-top-error: transparent;
  /* Datetime: bar colors */
  --datetime-bar-color-focus: var(--color-foreground-border-accent-focus);
  --datetime-bar-color-error: var(--color-system-danger-default);
  /* Datetime: disabled */
  --datetime-disabled-bottom-bar: transparent;
}

.traton .tl-datetime {
  /* Datetime: units */
  --datetime-border-radius: 4px 4px 4px 4px;
  /* Datetime: box-shadow */
  --datetime-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
  --datetime-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
  --datetime-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
  --datetime-box-shadow-disabled: none;
  --datetime-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
  --datetime-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
  --datetime-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
  --datetime-highlight: transparent;
  --datetime-highlight-error: transparent;
  /* Datetime: border colors */
  --datetime-border-color-left: var(--color-foreground-border-soft);
  --datetime-border-color-right: var(--color-foreground-border-soft);
  --datetime-border-color-bottom: var(--color-foreground-border-soft);
  --datetime-border-color-top: var(--color-foreground-border-soft);
  /* Datetime: border colors on hover */
  --datetime-border-color-left-hover: var(--color-foreground-border-strong);
  --datetime-border-color-right-hover: var(--color-foreground-border-strong);
  --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
  --datetime-border-color-top-hover: var(--color-foreground-border-strong);
  /* Datetime: border colors on success */
  --datetime-border-color-left-success: var(--color-foreground-border-strong);
  --datetime-border-color-right-success: var(--color-foreground-border-strong);
  --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
  --datetime-border-color-top-success: var(--color-foreground-border-strong);
  /* Datetime: border colors on focus */
  --datetime-border-color-left-focus: var(--color-foreground-border-accent-focus);
  --datetime-border-color-right-focus: var(--color-foreground-border-accent-focus);
  --datetime-border-color-bottom-focus: var(--color-foreground-border-accent-focus);
  --datetime-border-color-top-focus: var(--color-foreground-border-accent-focus);
  --datetime-outline-color-focus: var(--color-foreground-border-accent-focus);
  /* Datetime: border colors on error */
  --datetime-border-color-left-error: var(--color-system-danger-default);
  --datetime-border-color-right-error: var(--color-system-danger-default);
  --datetime-border-color-bottom-error: var(--color-system-danger-default);
  --datetime-border-color-top-error: var(--color-system-danger-default);
  /* Datetime: bar colors */
  --datetime-bar-color-focus: transparent;
  --datetime-bar-color-error: transparent;
  /* Datetime: disabled */
  --datetime-disabled-bottom-bar: none;
}

/* Typography Usage mixins */
.tl-datetime {
  display: block;
  min-width: 208px;
  background: unset;
}
.tl-datetime--no-min-width {
  min-width: auto;
}
.tl-datetime {
  /* Native picker visuals */
}
.tl-datetime input[type=datetime-local]::-webkit-inner-spin-button, .tl-datetime input[type=datetime-local]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=date]::-webkit-inner-spin-button,
.tl-datetime input[type=date]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=month]::-webkit-inner-spin-button,
.tl-datetime input[type=month]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=week]::-webkit-inner-spin-button,
.tl-datetime input[type=week]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=time]::-webkit-inner-spin-button,
.tl-datetime input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.tl-datetime__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  display: block;
  margin-bottom: var(--tds-spacing-element-8);
  color: var(--datetime-label);
}
.tl-datetime:has(input:disabled) .tl-datetime__label {
  color: var(--datetime-label-disabled);
  cursor: not-allowed;
}

.tl-datetime__wrapper {
  border-radius: var(--datetime-border-radius);
  position: relative;
  height: 56px;
  box-sizing: border-box;
  background-color: var(--datetime-background);
}
.tl-datetime--md .tl-datetime__wrapper {
  height: 48px;
}
.tl-datetime--sm .tl-datetime__wrapper {
  height: 40px;
}
.tl-datetime:has(input:disabled) .tl-datetime__wrapper {
  cursor: not-allowed;
}

.tl-datetime__icon {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: var(--datetime-icon);
  pointer-events: none;
  /* Firefox shows its own native picker icon — hide ours to avoid a duplicate */
}
@supports (-moz-appearance: none) {
  .tl-datetime__icon {
    display: none;
  }
}
.tl-datetime--error .tl-datetime__icon {
  color: var(--datetime-icon-error);
}
.tl-datetime:has(input:disabled) .tl-datetime__icon {
  color: var(--datetime-icon-disabled);
}

.tl-datetime__input {
  box-sizing: border-box;
}
.tl-datetime__input * {
  box-sizing: border-box;
}
.tl-datetime__input {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  border-radius: var(--datetime-border-radius);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--datetime-text);
  background-color: var(--datetime-background);
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
  box-shadow: inset var(--datetime-box-shadow);
  transition: box-shadow 0.2s;
}
.tl-datetime__input:focus {
  box-shadow: inset var(--datetime-box-shadow-focus);
}
.tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) {
  box-shadow: inset var(--datetime-box-shadow-hover);
}
.tl-datetime--error .tl-datetime__input {
  box-shadow: inset var(--datetime-box-shadow-error);
}
.tl-datetime--error .tl-datetime__input:focus {
  box-shadow: inset var(--datetime-box-shadow-error-focus);
}
.tl-datetime--error:hover .tl-datetime__input:not(:focus, :disabled) {
  box-shadow: inset var(--datetime-box-shadow-error-hover);
}
.tl-datetime--error .tl-datetime__input:disabled {
  box-shadow: inset var(--datetime-box-shadow-error);
}
.tl-datetime__input::placeholder {
  opacity: 1;
  color: var(--datetime-placeholder);
}
.tl-datetime__input:focus::placeholder {
  color: var(--datetime-placeholder-focus);
}
.tl-datetime__input {
  /* WebKit datetime fields */
}
.tl-datetime__input::-webkit-datetime-edit-text {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-month-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-day-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-year-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-hour-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-minute-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-second-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-millisecond-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-meridiem-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input:disabled {
  background-color: var(--datetime-background-disabled);
  color: var(--datetime-text-disabled);
  box-shadow: inset var(--datetime-box-shadow-disabled);
  cursor: not-allowed;
}
.tl-datetime__input:disabled::placeholder {
  color: var(--datetime-placeholder-disabled);
}
.tl-datetime__input:disabled ~ .tl-datetime__label-inside {
  color: var(--datetime-label-disabled);
}
.tl-datetime__input:disabled {
  /* WebKit datetime fields - disabled state */
}
.tl-datetime__input:disabled::-webkit-datetime-edit-text {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-month-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-day-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-year-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-hour-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-minute-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-second-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-millisecond-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-meridiem-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime--label-inside .tl-datetime__input {
  padding-top: var(--tds-spacing-element-24);
  padding-bottom: 15px;
}
.tl-datetime--md.tl-datetime--label-inside .tl-datetime__input {
  padding-top: var(--tds-spacing-element-20);
  padding-bottom: 11px;
}
.tl-datetime--sm .tl-datetime__input {
  padding: var(--tds-spacing-element-16);
}

.tl-datetime__label-inside {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  position: absolute;
  pointer-events: none;
  color: var(--datetime-label-inside);
  left: 16px;
  transition: 0.1s ease all;
}
.tl-datetime--lg .tl-datetime__label-inside {
  top: 12px;
}
.tl-datetime--md .tl-datetime__label-inside {
  top: 8px;
}
.tl-datetime--sm .tl-datetime__label-inside {
  display: none;
}

.tl-datetime__helper {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  display: inline-flex;
  gap: 8px;
  padding-top: var(--tds-spacing-element-4);
  color: var(--datetime-helper);
  /* CSS-generated error icon */
}
.tl-datetime__helper::before {
  content: "";
  width: 16px;
  height: 16px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  flex-shrink: 0;
  display: none;
}
.tl-datetime--error .tl-datetime__helper {
  color: var(--datetime-helper-error);
}
.tl-datetime--error .tl-datetime__helper::before {
  display: inline-flex;
  mask-image: var(--icon-error-svg);
  background-color: var(--datetime-helper-error);
}
.tl-datetime__helper {
  /* Disabled state (should not override error text/icon color) */
}
.tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__helper {
  color: var(--color-foreground-text-disabled);
}