@scania/tegel-lite 0.0.1-9

package/dist/tl-text-field.css

@@ -0,0 +1,1675 @@
+.tl-text-field {
+  --text-field-background: var(--color-background-layer-01);
+  --text-field-text: var(--color-foreground-text-strong);
+  --text-field-placeholder: var(--color-foreground-text-subtle);
+  --text-field-affix: var(--color-foreground-text-defined);
+  --text-field-label: var(--color-foreground-text-strong);
+  --text-field-label-inside: var(--color-foreground-text-strong);
+  --text-field-label-inside-left: 16px;
+  --text-field-affix-width-icon: 35px;
+  --text-field-affix-width-text: 8px;
+  --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
+  --text-field-helper: var(--color-foreground-text-defined);
+  --text-field-error: var(--color-system-danger-default);
+  --text-field-affix-error: var(--color-foreground-text-defined);
+  --text-field-background-disabled: var(--color-background-layer-01);
+  --text-field-text-disabled: var(--color-foreground-text-disabled);
+  --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
+  --text-field-label-disabled: var(--color-foreground-text-disabled);
+  --text-field-affix-disabled: var(--color-foreground-text-disabled);
+  --text-field-textcounter: var(--color-foreground-text-defined);
+}
+.tl-text-field--primary {
+  --text-field-background: var(--color-background-layer-01);
+  --text-field-background-disabled: var(--color-background-layer-01);
+}
+.tl-text-field--secondary {
+  --text-field-background: var(--color-background-layer-02);
+  --text-field-background-disabled: var(--color-background-layer-02);
+}
+
+.tl-text-field,
+.scania .tl-text-field {
+  --text-field-border-radius: 4px 4px 0 0;
+  --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
+  --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
+  --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
+  --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
+  --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
+  --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
+  --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
+  --text-field-bar-focus: var(--color-foreground-border-accent-focus);
+  --text-field-bar-error: var(--color-system-danger-default);
+  --text-field-focus-outline: none;
+  --text-field-focus-outline-error: none;
+  --text-field-focus-outline-offset: 0;
+}
+
+.traton .tl-text-field {
+  --text-field-border-radius: 4px 4px 4px 4px;
+  --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
+  --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
+  --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
+  --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
+  --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
+  --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
+  --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
+  --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
+  --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
+  --text-field-focus-outline-offset: 0;
+  --text-field-bar-focus: transparent;
+  --text-field-bar-error: transparent;
+}
+
+/* Typography Usage mixins */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  flex-shrink: 0;
+  color: inherit;
+  mask-image: none;
+}
+.tl-icon--24v_battery {
+  mask-image: var(--icon-24v_battery-svg);
+  background-color: currentcolor;
+}
+.tl-icon--24v_battery_inactive {
+  mask-image: var(--icon-24v_battery_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--acceleration {
+  mask-image: var(--icon-acceleration-svg);
+  background-color: currentcolor;
+}
+.tl-icon--acceleration_inactive {
+  mask-image: var(--icon-acceleration_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--adblue {
+  mask-image: var(--icon-adblue-svg);
+  background-color: currentcolor;
+}
+.tl-icon--adblue_inactive {
+  mask-image: var(--icon-adblue_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_diagonal {
+  mask-image: var(--icon-arrow_diagonal-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_down {
+  mask-image: var(--icon-arrow_down-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_left {
+  mask-image: var(--icon-arrow_left-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_right {
+  mask-image: var(--icon-arrow_right-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_up {
+  mask-image: var(--icon-arrow_up-svg);
+  background-color: currentcolor;
+}
+.tl-icon--audio {
+  mask-image: var(--icon-audio-svg);
+  background-color: currentcolor;
+}
+.tl-icon--audio_inactive {
+  mask-image: var(--icon-audio_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--award {
+  mask-image: var(--icon-award-svg);
+  background-color: currentcolor;
+}
+.tl-icon--back {
+  mask-image: var(--icon-back-svg);
+  background-color: currentcolor;
+}
+.tl-icon--backward {
+  mask-image: var(--icon-backward-svg);
+  background-color: currentcolor;
+}
+.tl-icon--backward_inactive {
+  mask-image: var(--icon-backward_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bento {
+  mask-image: var(--icon-bento-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bug {
+  mask-image: var(--icon-bug-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bug_inactive {
+  mask-image: var(--icon-bug_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--burger {
+  mask-image: var(--icon-burger-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bus {
+  mask-image: var(--icon-bus-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bus_inactive {
+  mask-image: var(--icon-bus_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cab_door {
+  mask-image: var(--icon-cab_door-svg);
+  background-color: currentcolor;
+}
+.tl-icon--calendar {
+  mask-image: var(--icon-calendar-svg);
+  background-color: currentcolor;
+}
+.tl-icon--calendar_inactive {
+  mask-image: var(--icon-calendar_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--camera {
+  mask-image: var(--icon-camera-svg);
+  background-color: currentcolor;
+}
+.tl-icon--camera_inactive {
+  mask-image: var(--icon-camera_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--card {
+  mask-image: var(--icon-card-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cart {
+  mask-image: var(--icon-cart-svg);
+  background-color: currentcolor;
+}
+.tl-icon--charging_complete {
+  mask-image: var(--icon-charging_complete-svg);
+  background-color: currentcolor;
+}
+.tl-icon--charging_failed {
+  mask-image: var(--icon-charging_failed-svg);
+  background-color: currentcolor;
+}
+.tl-icon--charging_speed {
+  mask-image: var(--icon-charging_speed-svg);
+  background-color: currentcolor;
+}
+.tl-icon--charging_speed_inactive {
+  mask-image: var(--icon-charging_speed_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--charging_stopped {
+  mask-image: var(--icon-charging_stopped-svg);
+  background-color: currentcolor;
+}
+.tl-icon--chevron_down {
+  mask-image: var(--icon-chevron_down-svg);
+  background-color: currentcolor;
+}
+.tl-icon--chevron_left {
+  mask-image: var(--icon-chevron_left-svg);
+  background-color: currentcolor;
+}
+.tl-icon--chevron_right {
+  mask-image: var(--icon-chevron_right-svg);
+  background-color: currentcolor;
+}
+.tl-icon--chevron_up {
+  mask-image: var(--icon-chevron_up-svg);
+  background-color: currentcolor;
+}
+.tl-icon--clock {
+  mask-image: var(--icon-clock-svg);
+  background-color: currentcolor;
+}
+.tl-icon--clock_inactive {
+  mask-image: var(--icon-clock_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--configurator {
+  mask-image: var(--icon-configurator-svg);
+  background-color: currentcolor;
+}
+.tl-icon--contact {
+  mask-image: var(--icon-contact-svg);
+  background-color: currentcolor;
+}
+.tl-icon--contact_inactive {
+  mask-image: var(--icon-contact_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cookie {
+  mask-image: var(--icon-cookie-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cookie_inactive {
+  mask-image: var(--icon-cookie_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--coolant_level {
+  mask-image: var(--icon-coolant_level-svg);
+  background-color: currentcolor;
+}
+.tl-icon--coolant_level_inactive {
+  mask-image: var(--icon-coolant_level_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--copy {
+  mask-image: var(--icon-copy-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cross {
+  mask-image: var(--icon-cross-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cup {
+  mask-image: var(--icon-cup-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cup_inactive {
+  mask-image: var(--icon-cup_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--dashboard {
+  mask-image: var(--icon-dashboard-svg);
+  background-color: currentcolor;
+}
+.tl-icon--department {
+  mask-image: var(--icon-department-svg);
+  background-color: currentcolor;
+}
+.tl-icon--department_inactive {
+  mask-image: var(--icon-department_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--departure_scheduling {
+  mask-image: var(--icon-departure_scheduling-svg);
+  background-color: currentcolor;
+}
+.tl-icon--departure_scheduling_inactive {
+  mask-image: var(--icon-departure_scheduling_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--diamond {
+  mask-image: var(--icon-diamond-svg);
+  background-color: currentcolor;
+}
+.tl-icon--diamond_inactive {
+  mask-image: var(--icon-diamond_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document {
+  mask-image: var(--icon-document-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_check {
+  mask-image: var(--icon-document_check-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_doc {
+  mask-image: var(--icon-document_doc-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_eye {
+  mask-image: var(--icon-document_eye-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_pdf {
+  mask-image: var(--icon-document_pdf-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_plus {
+  mask-image: var(--icon-document_plus-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_plus_inactive {
+  mask-image: var(--icon-document_plus_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_ppt {
+  mask-image: var(--icon-document_ppt-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_tool {
+  mask-image: var(--icon-document_tool-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_wrong {
+  mask-image: var(--icon-document_wrong-svg);
+  background-color: currentcolor;
+}
+.tl-icon--document_xls {
+  mask-image: var(--icon-document_xls-svg);
+  background-color: currentcolor;
+}
+.tl-icon--dollar {
+  mask-image: var(--icon-dollar-svg);
+  background-color: currentcolor;
+}
+.tl-icon--doner {
+  mask-image: var(--icon-doner-svg);
+  background-color: currentcolor;
+}
+.tl-icon--double_kebab {
+  mask-image: var(--icon-double_kebab-svg);
+  background-color: currentcolor;
+}
+.tl-icon--download {
+  mask-image: var(--icon-download-svg);
+  background-color: currentcolor;
+}
+.tl-icon--driving_licence {
+  mask-image: var(--icon-driving_licence-svg);
+  background-color: currentcolor;
+}
+.tl-icon--driving_licence_inactive {
+  mask-image: var(--icon-driving_licence_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--drop {
+  mask-image: var(--icon-drop-svg);
+  background-color: currentcolor;
+}
+.tl-icon--drop_inactive {
+  mask-image: var(--icon-drop_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--edit {
+  mask-image: var(--icon-edit-svg);
+  background-color: currentcolor;
+}
+.tl-icon--edit_inactive {
+  mask-image: var(--icon-edit_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--email {
+  mask-image: var(--icon-email-svg);
+  background-color: currentcolor;
+}
+.tl-icon--engine {
+  mask-image: var(--icon-engine-svg);
+  background-color: currentcolor;
+}
+.tl-icon--engine_inactive {
+  mask-image: var(--icon-engine_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--environment {
+  mask-image: var(--icon-environment-svg);
+  background-color: currentcolor;
+}
+.tl-icon--environment_inactive {
+  mask-image: var(--icon-environment_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--error {
+  mask-image: var(--icon-error-svg);
+  background-color: currentcolor;
+}
+.tl-icon--exit {
+  mask-image: var(--icon-exit-svg);
+  background-color: currentcolor;
+}
+.tl-icon--expand {
+  mask-image: var(--icon-expand-svg);
+  background-color: currentcolor;
+}
+.tl-icon--expand_inactive {
+  mask-image: var(--icon-expand_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--export {
+  mask-image: var(--icon-export-svg);
+  background-color: currentcolor;
+}
+.tl-icon--export_inactive {
+  mask-image: var(--icon-export_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--eye {
+  mask-image: var(--icon-eye-svg);
+  background-color: currentcolor;
+}
+.tl-icon--eye_inactive {
+  mask-image: var(--icon-eye_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--face_dissatisfied {
+  mask-image: var(--icon-face_dissatisfied-svg);
+  background-color: currentcolor;
+}
+.tl-icon--face_neutral {
+  mask-image: var(--icon-face_neutral-svg);
+  background-color: currentcolor;
+}
+.tl-icon--face_satisfied {
+  mask-image: var(--icon-face_satisfied-svg);
+  background-color: currentcolor;
+}
+.tl-icon--factory {
+  mask-image: var(--icon-factory-svg);
+  background-color: currentcolor;
+}
+.tl-icon--factory_inactive {
+  mask-image: var(--icon-factory_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--ferry {
+  mask-image: var(--icon-ferry-svg);
+  background-color: currentcolor;
+}
+.tl-icon--ferry_inactive {
+  mask-image: var(--icon-ferry_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--filters {
+  mask-image: var(--icon-filters-svg);
+  background-color: currentcolor;
+}
+.tl-icon--filters_inactive {
+  mask-image: var(--icon-filters_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--flash {
+  mask-image: var(--icon-flash-svg);
+  background-color: currentcolor;
+}
+.tl-icon--flash_inactive {
+  mask-image: var(--icon-flash_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--folder {
+  mask-image: var(--icon-folder-svg);
+  background-color: currentcolor;
+}
+.tl-icon--forward {
+  mask-image: var(--icon-forward-svg);
+  background-color: currentcolor;
+}
+.tl-icon--forward_inactive {
+  mask-image: var(--icon-forward_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--fuel {
+  mask-image: var(--icon-fuel-svg);
+  background-color: currentcolor;
+}
+.tl-icon--fuel_gauge {
+  mask-image: var(--icon-fuel_gauge-svg);
+  background-color: currentcolor;
+}
+.tl-icon--fuel_gauge_inactive {
+  mask-image: var(--icon-fuel_gauge_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--fuel_inactive {
+  mask-image: var(--icon-fuel_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--gift {
+  mask-image: var(--icon-gift-svg);
+  background-color: currentcolor;
+}
+.tl-icon--gift inactive {
+  mask-image: var(--icon-gift inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--global {
+  mask-image: var(--icon-global-svg);
+  background-color: currentcolor;
+}
+.tl-icon--guided_tour {
+  mask-image: var(--icon-guided_tour-svg);
+  background-color: currentcolor;
+}
+.tl-icon--guided_tour_inactive {
+  mask-image: var(--icon-guided_tour_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--hatch_open {
+  mask-image: var(--icon-hatch_open-svg);
+  background-color: currentcolor;
+}
+.tl-icon--hatch_open_1 {
+  mask-image: var(--icon-hatch_open_1-svg);
+  background-color: currentcolor;
+}
+.tl-icon--hatch_open_2 {
+  mask-image: var(--icon-hatch_open_2-svg);
+  background-color: currentcolor;
+}
+.tl-icon--hatch_open_inactive {
+  mask-image: var(--icon-hatch_open_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--heart {
+  mask-image: var(--icon-heart-svg);
+  background-color: currentcolor;
+}
+.tl-icon--heart_inactive {
+  mask-image: var(--icon-heart_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--heating_inactive_screen {
+  mask-image: var(--icon-heating_inactive_screen-svg);
+  background-color: currentcolor;
+}
+.tl-icon--history {
+  mask-image: var(--icon-history-svg);
+  background-color: currentcolor;
+}
+.tl-icon--history_inactive {
+  mask-image: var(--icon-history_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--home {
+  mask-image: var(--icon-home-svg);
+  background-color: currentcolor;
+}
+.tl-icon--home_inactive {
+  mask-image: var(--icon-home_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--idea {
+  mask-image: var(--icon-idea-svg);
+  background-color: currentcolor;
+}
+.tl-icon--idea_inactive {
+  mask-image: var(--icon-idea_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--image {
+  mask-image: var(--icon-image-svg);
+  background-color: currentcolor;
+}
+.tl-icon--image_add {
+  mask-image: var(--icon-image_add-svg);
+  background-color: currentcolor;
+}
+.tl-icon--image_inactive {
+  mask-image: var(--icon-image_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--image_set {
+  mask-image: var(--icon-image_set-svg);
+  background-color: currentcolor;
+}
+.tl-icon--info {
+  mask-image: var(--icon-info-svg);
+  background-color: currentcolor;
+}
+.tl-icon--insights {
+  mask-image: var(--icon-insights-svg);
+  background-color: currentcolor;
+}
+.tl-icon--kebab {
+  mask-image: var(--icon-kebab-svg);
+  background-color: currentcolor;
+}
+.tl-icon--key {
+  mask-image: var(--icon-key-svg);
+  background-color: currentcolor;
+}
+.tl-icon--key_inactive {
+  mask-image: var(--icon-key_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--language {
+  mask-image: var(--icon-language-svg);
+  background-color: currentcolor;
+}
+.tl-icon--layer {
+  mask-image: var(--icon-layer-svg);
+  background-color: currentcolor;
+}
+.tl-icon--layer_inactive {
+  mask-image: var(--icon-layer_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--link {
+  mask-image: var(--icon-link-svg);
+  background-color: currentcolor;
+}
+.tl-icon--link_broken {
+  mask-image: var(--icon-link_broken-svg);
+  background-color: currentcolor;
+}
+.tl-icon--list {
+  mask-image: var(--icon-list-svg);
+  background-color: currentcolor;
+}
+.tl-icon--list_inactive {
+  mask-image: var(--icon-list_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--lock {
+  mask-image: var(--icon-lock-svg);
+  background-color: currentcolor;
+}
+.tl-icon--lock_inactive {
+  mask-image: var(--icon-lock_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--map_cursor {
+  mask-image: var(--icon-map_cursor-svg);
+  background-color: currentcolor;
+}
+.tl-icon--map_cursor_inactive {
+  mask-image: var(--icon-map_cursor_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--maximize_fullscreen {
+  mask-image: var(--icon-maximize_fullscreen-svg);
+  background-color: currentcolor;
+}
+.tl-icon--meatballs {
+  mask-image: var(--icon-meatballs-svg);
+  background-color: currentcolor;
+}
+.tl-icon--merge {
+  mask-image: var(--icon-merge-svg);
+  background-color: currentcolor;
+}
+.tl-icon--merge_inactive {
+  mask-image: var(--icon-merge_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--message {
+  mask-image: var(--icon-message-svg);
+  background-color: currentcolor;
+}
+.tl-icon--message_inactive {
+  mask-image: var(--icon-message_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--mileage {
+  mask-image: var(--icon-mileage-svg);
+  background-color: currentcolor;
+}
+.tl-icon--mileage_inactive {
+  mask-image: var(--icon-mileage_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--minimize_fullscreen {
+  mask-image: var(--icon-minimize_fullscreen-svg);
+  background-color: currentcolor;
+}
+.tl-icon--minus {
+  mask-image: var(--icon-minus-svg);
+  background-color: currentcolor;
+}
+.tl-icon--navigate {
+  mask-image: var(--icon-navigate-svg);
+  background-color: currentcolor;
+}
+.tl-icon--navigate_inactive {
+  mask-image: var(--icon-navigate_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--notification {
+  mask-image: var(--icon-notification-svg);
+  background-color: currentcolor;
+}
+.tl-icon--notification_inactive {
+  mask-image: var(--icon-notification_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--oil_level {
+  mask-image: var(--icon-oil_level-svg);
+  background-color: currentcolor;
+}
+.tl-icon--oil_level_inactive {
+  mask-image: var(--icon-oil_level_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--pause {
+  mask-image: var(--icon-pause-svg);
+  background-color: currentcolor;
+}
+.tl-icon--pause_inactive {
+  mask-image: var(--icon-pause_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--phone {
+  mask-image: var(--icon-phone-svg);
+  background-color: currentcolor;
+}
+.tl-icon--phone_inactive {
+  mask-image: var(--icon-phone_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--pie_chart {
+  mask-image: var(--icon-pie_chart-svg);
+  background-color: currentcolor;
+}
+.tl-icon--pin {
+  mask-image: var(--icon-pin-svg);
+  background-color: currentcolor;
+}
+.tl-icon--pin_inactive {
+  mask-image: var(--icon-pin_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--placeholder {
+  mask-image: var(--icon-placeholder-svg);
+  background-color: currentcolor;
+}
+.tl-icon--play {
+  mask-image: var(--icon-play-svg);
+  background-color: currentcolor;
+}
+.tl-icon--play_inactive {
+  mask-image: var(--icon-play_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--plus {
+  mask-image: var(--icon-plus-svg);
+  background-color: currentcolor;
+}
+.tl-icon--powerplug {
+  mask-image: var(--icon-powerplug-svg);
+  background-color: currentcolor;
+}
+.tl-icon--powerplug_inactive {
+  mask-image: var(--icon-powerplug_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--print {
+  mask-image: var(--icon-print-svg);
+  background-color: currentcolor;
+}
+.tl-icon--print_inactive {
+  mask-image: var(--icon-print_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--privacy {
+  mask-image: var(--icon-privacy-svg);
+  background-color: currentcolor;
+}
+.tl-icon--privacy_inactive {
+  mask-image: var(--icon-privacy_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--profile {
+  mask-image: var(--icon-profile-svg);
+  background-color: currentcolor;
+}
+.tl-icon--profile_inactive {
+  mask-image: var(--icon-profile_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--prohibited {
+  mask-image: var(--icon-prohibited-svg);
+  background-color: currentcolor;
+}
+.tl-icon--proportions {
+  mask-image: var(--icon-proportions-svg);
+  background-color: currentcolor;
+}
+.tl-icon--proportions_inactive {
+  mask-image: var(--icon-proportions_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--range {
+  mask-image: var(--icon-range-svg);
+  background-color: currentcolor;
+}
+.tl-icon--range_inactive {
+  mask-image: var(--icon-range_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--redirect {
+  mask-image: var(--icon-redirect-svg);
+  background-color: currentcolor;
+}
+.tl-icon--refresh {
+  mask-image: var(--icon-refresh-svg);
+  background-color: currentcolor;
+}
+.tl-icon--refresh_inactive {
+  mask-image: var(--icon-refresh_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--reload {
+  mask-image: var(--icon-reload-svg);
+  background-color: currentcolor;
+}
+.tl-icon--reload_inactive {
+  mask-image: var(--icon-reload_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--repeat {
+  mask-image: var(--icon-repeat-svg);
+  background-color: currentcolor;
+}
+.tl-icon--report {
+  mask-image: var(--icon-report-svg);
+  background-color: currentcolor;
+}
+.tl-icon--report_inactive {
+  mask-image: var(--icon-report_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--route {
+  mask-image: var(--icon-route-svg);
+  background-color: currentcolor;
+}
+.tl-icon--route_inactive {
+  mask-image: var(--icon-route_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--save {
+  mask-image: var(--icon-save-svg);
+  background-color: currentcolor;
+}
+.tl-icon--save_inactive {
+  mask-image: var(--icon-save_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--search {
+  mask-image: var(--icon-search-svg);
+  background-color: currentcolor;
+}
+.tl-icon--send {
+  mask-image: var(--icon-send-svg);
+  background-color: currentcolor;
+}
+.tl-icon--send_inactive {
+  mask-image: var(--icon-send_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--settings {
+  mask-image: var(--icon-settings-svg);
+  background-color: currentcolor;
+}
+.tl-icon--share {
+  mask-image: var(--icon-share-svg);
+  background-color: currentcolor;
+}
+.tl-icon--shuffle {
+  mask-image: var(--icon-shuffle-svg);
+  background-color: currentcolor;
+}
+.tl-icon--skip_backwards {
+  mask-image: var(--icon-skip_backwards-svg);
+  background-color: currentcolor;
+}
+.tl-icon--skip_forward {
+  mask-image: var(--icon-skip_forward-svg);
+  background-color: currentcolor;
+}
+.tl-icon--smartphone {
+  mask-image: var(--icon-smartphone-svg);
+  background-color: currentcolor;
+}
+.tl-icon--smartphone_inactive {
+  mask-image: var(--icon-smartphone_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--sorting {
+  mask-image: var(--icon-sorting-svg);
+  background-color: currentcolor;
+}
+.tl-icon--speedometer {
+  mask-image: var(--icon-speedometer-svg);
+  background-color: currentcolor;
+}
+.tl-icon--speedometer_inactive {
+  mask-image: var(--icon-speedometer_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--star {
+  mask-image: var(--icon-star-svg);
+  background-color: currentcolor;
+}
+.tl-icon--support {
+  mask-image: var(--icon-support-svg);
+  background-color: currentcolor;
+}
+.tl-icon--target {
+  mask-image: var(--icon-target-svg);
+  background-color: currentcolor;
+}
+.tl-icon--target_inactive {
+  mask-image: var(--icon-target_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--temperature {
+  mask-image: var(--icon-temperature-svg);
+  background-color: currentcolor;
+}
+.tl-icon--temperature_inactive {
+  mask-image: var(--icon-temperature_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--text {
+  mask-image: var(--icon-text-svg);
+  background-color: currentcolor;
+}
+.tl-icon--text_inactive {
+  mask-image: var(--icon-text_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--thumbs_down {
+  mask-image: var(--icon-thumbs_down-svg);
+  background-color: currentcolor;
+}
+.tl-icon--thumbs_up {
+  mask-image: var(--icon-thumbs_up-svg);
+  background-color: currentcolor;
+}
+.tl-icon--tick {
+  mask-image: var(--icon-tick-svg);
+  background-color: currentcolor;
+}
+.tl-icon--timer {
+  mask-image: var(--icon-timer-svg);
+  background-color: currentcolor;
+}
+.tl-icon--tool {
+  mask-image: var(--icon-tool-svg);
+  background-color: currentcolor;
+}
+.tl-icon--tool_inactive {
+  mask-image: var(--icon-tool_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--trailer {
+  mask-image: var(--icon-trailer-svg);
+  background-color: currentcolor;
+}
+.tl-icon--trailer_inactive {
+  mask-image: var(--icon-trailer_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--trash {
+  mask-image: var(--icon-trash-svg);
+  background-color: currentcolor;
+}
+.tl-icon--trash_inactive {
+  mask-image: var(--icon-trash_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--truck {
+  mask-image: var(--icon-truck-svg);
+  background-color: currentcolor;
+}
+.tl-icon--truck_inactive {
+  mask-image: var(--icon-truck_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--undo {
+  mask-image: var(--icon-undo-svg);
+  background-color: currentcolor;
+}
+.tl-icon--undo_inactive {
+  mask-image: var(--icon-undo_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--unlock {
+  mask-image: var(--icon-unlock-svg);
+  background-color: currentcolor;
+}
+.tl-icon--upload {
+  mask-image: var(--icon-upload-svg);
+  background-color: currentcolor;
+}
+.tl-icon--video {
+  mask-image: var(--icon-video-svg);
+  background-color: currentcolor;
+}
+.tl-icon--video_inactive {
+  mask-image: var(--icon-video_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--wallet {
+  mask-image: var(--icon-wallet-svg);
+  background-color: currentcolor;
+}
+.tl-icon--warning {
+  mask-image: var(--icon-warning-svg);
+  background-color: currentcolor;
+}
+.tl-icon--weight {
+  mask-image: var(--icon-weight-svg);
+  background-color: currentcolor;
+}
+.tl-icon--weight_inactive {
+  mask-image: var(--icon-weight_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--wifi {
+  mask-image: var(--icon-wifi-svg);
+  background-color: currentcolor;
+}
+.tl-icon--wifi_inactive {
+  mask-image: var(--icon-wifi_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--windscreen_heating {
+  mask-image: var(--icon-windscreen_heating-svg);
+  background-color: currentcolor;
+}
+.tl-icon--windscreen_heating_inactive {
+  mask-image: var(--icon-windscreen_heating_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--12 {
+  width: 12px;
+  height: 12px;
+}
+.tl-icon--14 {
+  width: 14px;
+  height: 14px;
+}
+.tl-icon--16 {
+  width: 16px;
+  height: 16px;
+}
+.tl-icon--18 {
+  width: 18px;
+  height: 18px;
+}
+.tl-icon--20 {
+  width: 20px;
+  height: 20px;
+}
+.tl-icon--22 {
+  width: 22px;
+  height: 22px;
+}
+.tl-icon--24 {
+  width: 24px;
+  height: 24px;
+}
+.tl-icon--26 {
+  width: 26px;
+  height: 26px;
+}
+.tl-icon--28 {
+  width: 28px;
+  height: 28px;
+}
+.tl-icon--30 {
+  width: 30px;
+  height: 30px;
+}
+.tl-icon--32 {
+  width: 32px;
+  height: 32px;
+}
+.tl-icon--34 {
+  width: 34px;
+  height: 34px;
+}
+.tl-icon--36 {
+  width: 36px;
+  height: 36px;
+}
+.tl-icon--38 {
+  width: 38px;
+  height: 38px;
+}
+.tl-icon--40 {
+  width: 40px;
+  height: 40px;
+}
+.tl-icon--42 {
+  width: 42px;
+  height: 42px;
+}
+.tl-icon--44 {
+  width: 44px;
+  height: 44px;
+}
+.tl-icon--46 {
+  width: 46px;
+  height: 46px;
+}
+.tl-icon--48 {
+  width: 48px;
+  height: 48px;
+}
+.tl-icon--50 {
+  width: 50px;
+  height: 50px;
+}
+.tl-icon--52 {
+  width: 52px;
+  height: 52px;
+}
+.tl-icon--54 {
+  width: 54px;
+  height: 54px;
+}
+.tl-icon--56 {
+  width: 56px;
+  height: 56px;
+}
+.tl-icon--58 {
+  width: 58px;
+  height: 58px;
+}
+.tl-icon--60 {
+  width: 60px;
+  height: 60px;
+}
+.tl-icon--62 {
+  width: 62px;
+  height: 62px;
+}
+.tl-icon--64 {
+  width: 64px;
+  height: 64px;
+}
+.tl-icon--66 {
+  width: 66px;
+  height: 66px;
+}
+.tl-icon--68 {
+  width: 68px;
+  height: 68px;
+}
+.tl-icon--70 {
+  width: 70px;
+  height: 70px;
+}
+.tl-icon--72 {
+  width: 72px;
+  height: 72px;
+}
+.tl-icon--74 {
+  width: 74px;
+  height: 74px;
+}
+.tl-icon--76 {
+  width: 76px;
+  height: 76px;
+}
+.tl-icon--78 {
+  width: 78px;
+  height: 78px;
+}
+.tl-icon--80 {
+  width: 80px;
+  height: 80px;
+}
+.tl-icon--82 {
+  width: 82px;
+  height: 82px;
+}
+.tl-icon--84 {
+  width: 84px;
+  height: 84px;
+}
+.tl-icon--86 {
+  width: 86px;
+  height: 86px;
+}
+.tl-icon--88 {
+  width: 88px;
+  height: 88px;
+}
+.tl-icon--90 {
+  width: 90px;
+  height: 90px;
+}
+.tl-icon--92 {
+  width: 92px;
+  height: 92px;
+}
+.tl-icon--94 {
+  width: 94px;
+  height: 94px;
+}
+.tl-icon--96 {
+  width: 96px;
+  height: 96px;
+}
+
+.tl-text-field {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-width: 208px;
+  height: 56px;
+  padding-bottom: 1px;
+  border-radius: var(--text-field-border-radius);
+  box-sizing: border-box;
+}
+.tl-text-field--no-min-width {
+  min-width: auto;
+}
+.tl-text-field--lg {
+  height: 56px;
+}
+.tl-text-field--md {
+  height: 48px;
+}
+.tl-text-field--sm {
+  height: 40px;
+}
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  width: 20px;
+  height: 20px;
+  background-color: var(--text-field-text);
+  mask-image: var(--icon-edit_inactive-svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__label):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
+  top: calc(50% + 24px);
+}
+.tl-text-field:has(.tl-text-field__input:disabled) {
+  cursor: not-allowed;
+}
+.tl-text-field .tl-icon {
+  background-color: var(--text-field-affix);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
+  background-color: var(--text-field-affix-disabled);
+}
+
+.tl-text-field__input {
+  all: unset;
+  border-radius: var(--text-field-border-radius);
+  background-color: var(--text-field-background);
+  color: var(--text-field-text);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+}
+.tl-text-field__input::placeholder {
+  color: var(--text-field-placeholder);
+}
+.tl-text-field__input:disabled {
+  background-color: var(--text-field-background-disabled);
+  color: var(--text-field-text-disabled);
+  user-select: none;
+  pointer-events: none;
+}
+.tl-text-field__input:disabled::placeholder {
+  color: var(--text-field-placeholder-disabled);
+}
+.tl-text-field__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);
+  text-align: left;
+  color: var(--text-field-text);
+  flex: 1;
+  order: 2;
+  box-shadow: inset var(--text-field-box-shadow);
+  transition: box-shadow 0.2s;
+}
+.tl-text-field__input:focus {
+  box-shadow: inset var(--text-field-box-shadow-focus);
+}
+.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
+  box-shadow: inset var(--text-field-box-shadow-hover);
+}
+.tl-text-field--error .tl-text-field__input {
+  box-shadow: inset var(--text-field-box-shadow-error);
+}
+.tl-text-field--error .tl-text-field__input:focus {
+  box-shadow: inset var(--text-field-box-shadow-error-focus);
+}
+.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
+  box-shadow: inset var(--text-field-box-shadow-error-hover);
+}
+.tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
+  box-shadow: inset var(--text-field-box-shadow-success);
+}
+.tl-text-field__input:disabled {
+  box-shadow: none;
+  background-color: var(--text-field-background-disabled);
+  color: var(--text-field-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
+  box-shadow: inset var(--text-field-box-shadow);
+}
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
+  box-shadow: inset var(--text-field-box-shadow-focus);
+}
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
+  box-shadow: inset var(--text-field-box-shadow-hover);
+}
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
+  user-select: auto;
+  caret-color: transparent;
+  cursor: default;
+  pointer-events: none;
+}
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
+  padding-right: 54px;
+}
+.tl-text-field--lg .tl-text-field__input {
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+}
+.tl-text-field--md .tl-text-field__input {
+  padding: var(--tds-spacing-element-16);
+}
+.tl-text-field--sm .tl-text-field__input {
+  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
+}
+.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
+  padding-top: var(--tds-spacing-element-24);
+  padding-bottom: 15px;
+}
+.tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
+  padding-top: var(--tds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
+  padding-top: var(--tds-spacing-element-16);
+  padding-bottom: 7px;
+}
+.tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
+  padding-left: 44px;
+}
+.tl-text-field:has(.tl-text-field__prefix--text) .tl-text-field__input {
+  padding-left: calc(16px + var(--text-field-affix-width-text) + 8px);
+}
+.tl-text-field:has(.tl-text-field__suffix--icon) .tl-text-field__input {
+  padding-right: 44px;
+}
+.tl-text-field:has(.tl-text-field__suffix--text) .tl-text-field__input {
+  padding-right: calc(16px + var(--text-field-affix-width-text) + 8px);
+}
+.tl-text-field--label-inside .tl-text-field__input::placeholder {
+  color: transparent !important;
+}
+.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
+  color: var(--text-field-placeholder-disabled) !important;
+}
+
+.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__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: 8px;
+  color: var(--text-field-label);
+}
+.tl-text-field--label-inside .tl-text-field__label {
+  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);
+  position: absolute;
+  top: 50%;
+  left: var(--text-field-label-inside-left, 16px);
+  color: var(--text-field-label-inside);
+  pointer-events: none;
+  transform: translateY(-50%);
+  transform-origin: top left;
+  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
+  z-index: 1;
+}
+.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
+  left: 44px;
+}
+.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field__label {
+  left: calc(16px + var(--text-field-affix-width-text) + 8px);
+}
+.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  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);
+  top: 8px;
+  transform: translateY(0);
+  transition: 0.1s ease all;
+}
+.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: 44px;
+}
+.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: calc(16px + var(--text-field-affix-width-text) + 8px);
+}
+.tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  opacity: 0;
+  visibility: hidden;
+}
+.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
+  color: var(--text-field-label-disabled);
+}
+.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
+  color: var(--text-field-label-disabled);
+}
+
+.tl-text-field__bottom {
+  display: flex;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.tl-text-field__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);
+  color: var(--text-field-helper);
+  position: relative;
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__helper {
+  color: var(--color-foreground-text-disabled);
+}
+.tl-text-field--error .tl-text-field__helper {
+  padding-left: 24px;
+}
+.tl-text-field--error .tl-text-field__helper::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  background-color: var(--text-field-error);
+  mask-image: var(--icon-error-svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper {
+  padding-left: 0;
+}
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
+  display: none;
+}
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
+  color: var(--text-field-error);
+}
+.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
+  background-color: var(--color-foreground-text-disabled);
+}
+
+.tl-text-field__charcounter {
+  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);
+  margin-left: auto;
+  color: var(--text-field-textcounter);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
+  color: var(--color-foreground-text-disabled);
+}
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
+  color: var(--text-field-error);
+}
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
+  color: var(--text-field-error);
+}
+
+.tl-text-field__charcounter-divider {
+  color: var(--color-foreground-text-disabled);
+}
+
+.tl-text-field__prefix {
+  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);
+  color: var(--text-field-affix);
+  align-self: center;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  position: relative;
+}
+.tl-text-field__prefix--text, .tl-text-field__prefix--icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(calc(-50% - 1px));
+  z-index: 1;
+}
+.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
+  transform: translateY(calc(-50% + 24px));
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon > * {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
+  background-color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
+  background-color: var(--text-field-affix-disabled);
+}
+
+.tl-text-field__suffix {
+  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);
+  color: var(--text-field-affix);
+  align-self: center;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  position: relative;
+}
+.tl-text-field__suffix--text, .tl-text-field__suffix--icon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(calc(-50% - 1px));
+  z-index: 1;
+}
+.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
+  transform: translateY(calc(-50% + 24px));
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
+  background-color: var(--text-field-affix-disabled) !important;
+}
+
+.tl-text-field__suffix {
+  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);
+  color: var(--text-field-affix);
+  align-self: center;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  position: relative;
+  right: 16px;
+  padding-right: 0;
+  z-index: 1;
+}
+.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
+  transform: translateY(calc(-50% + 24px));
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
+  background-color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
+  background-color: var(--text-field-affix-disabled);
+}
+
+.tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
+.tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  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);
+  top: 7.5px;
+  left: var(--text-field-label-inside-left, 16px);
+  transform: none;
+}
+.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
+.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: 44px;
+}
+.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
+.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: calc(16px + var(--text-field-affix-width-text) + 8px);
+}