@egovernments/digit-ui-components-css 0.0.2-beta.1 → 0.0.2-beta.11

package/src/digitv2/components/textInputV2.scss

@@ -1,463 +1,463 @@
-@import url("../index.scss");
-@import url("../typography.scss");
-
-.digit-card-inputError {
-  @apply block w-full h-10 outline-none bg-white text-text-primary;
-  font-style: theme(digitv2.fontStyle.normal);
-  padding-left:theme(digitv2.spacers.spacer3);
-  font-family: theme(digitv2.fontFamily.sans);
-  font-size: theme(digitv2.spacers.spacer4);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height: theme(digitv2.spacers.spacer6);
-  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
-}
-
-.digit-text-input-field {
-  @apply relative w-full;
-
-  &.geolocation {
-    input {
-      @apply pointer-events-none;
-    }
-  }
-
-  &.numeric {
-    input {
-      @apply text-center overflow-hidden whitespace-no-wrap;
-      text-overflow: ellipsis;
-    }
-
-    .input-container:focus-within {
-      input {
-        border-left-style: hidden;
-        border-right-style: hidden;
-      }
-    }
-
-    &.numeric-buttons-only{
-      input{
-        pointer-events: none !important;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &.prefix {
-    .input-container:focus-within {
-      input {
-        border-left-style: hidden;
-      }
-    }
-  }
-
-  &.suffix {
-    .input-container:focus-within {
-      input {
-        border-right-style: hidden;
-      }
-    }
-  }
-
-  &.password {
-    input {
-      font-family: theme(digitv2.fontFamily.sans);
-      font-size: theme(digitv2.spacers.spacer4);
-      font-weight: 900;
-      line-height: theme(digitv2.spacers.spacer6);
-    }
-  }
-
-  &.disabled {
-
-    input,
-    .digit-prefix,
-    .digit-suffix,
-    .digit-numeric-button-prefix,
-    .digit-numeric-button-suffix {
-      pointer-events: none !important;
-      cursor: not-allowed;
-      background-color: theme(digitv2.lightTheme.generic-background);
-      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
-      color: theme(digitv2.lightTheme.generic-divider);
-    }
-
-    input {
-      background-color: white;
-    }
-
-    .digit-numeric-button-prefix,
-    .digit-prefix {
-      border-right-style: hidden;
-    }
-
-    .digit-numeric-button-suffix,
-    .digit-suffix {
-      border-left-style: hidden;
-    }
-  }
-
-  input[type="time"]::-webkit-calendar-picker-indicator,
-  input[type="date"]::-webkit-calendar-picker-indicator,
-  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
-  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
-    @apply absolute cursor-pointer w-6 h-6;
-    right: theme(digitv2.spacers.spacer3);
-  }
-
-  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
-  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
-    visibility: visible;
-    filter: invert(85%) sepia(0%) saturate(337%) hue-rotate(50deg) brightness(99%) contrast(99%);
-  }
-
-  input[type="date"][value=""]::-webkit-datetime-edit,
-  input[type="time"][value=""]::-webkit-datetime-edit,
-  input[type="date"]:disabled::-webkit-datetime-edit,
-  input[type="time"]:disabled::-webkit-datetime-edit,
-  input[type="search"]::-webkit-search-cancel-button,
-  input[type="search"]::-webkit-search-clear-button {
-    display: none;
-  }
-
-  ::placeholder,
-  input[type="date"][value=""]:not(:placeholder-shown)::before,
-  input[type="time"][value=""]:not(:placeholder-shown)::before {
-    content: attr(placeholder);
-    color: theme(digitv2.lightTheme.text-disabled);
-    font-family: theme(digitv2.fontFamily.sans);
-    font-weight: theme(digitv2.fontWeight.regular);
-    font-size: theme(digitv2.spacers.spacer4);
-    line-height: theme(digitv2.spacers.spacer6);
-  }
-
-  &.noneditable {
-
-    .digit-prefix,
-    .digit-suffix,
-    .digit-numeric-button-prefix,
-    .digit-numeric-button-suffix {
-      pointer-events: none !important;
-      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
-      background: theme(digitv2.lightTheme.generic-background);
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-
-    input {
-      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
-      background: theme(digitv2.lightTheme.generic-background);
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-
-    .digit-numeric-button-prefix,
-    .digit-prefix {
-      border-right-style: hidden;
-    }
-
-    .digit-numeric-button-suffix,
-    .digit-suffix {
-      border-left-style: hidden;
-    }
-
-    input[type="date"]::-webkit-calendar-picker-indicator,
-    input[type="time"]::-webkit-calendar-picker-indicator {
-      visibility: visible;
-      filter: invert(74%) sepia(7%) saturate(64%) hue-rotate(144deg) brightness(98%) contrast(89%);
-    }
-  }
-
-  &.error {
-
-    input,
-    .digit-prefix,
-    .digit-suffix,
-    .digit-numeric-button-prefix,
-    .digit-numeric-button-suffix {
-      border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
-    }
-
-    .digit-numeric-button-prefix,
-    .digit-prefix {
-      border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-    }
-
-    .digit-numeric-button-suffix,
-    .digit-suffix {
-      border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-    }
-
-    &.numeric {
-      input {
-        border-left-style: hidden;
-        border-right-style: hidden;
-      }
-    }
-
-    &.suffix {
-      input {
-        border-right-style: hidden;
-      }
-    }
-
-    &.prefix {
-      input {
-        border-left-style: hidden;
-      }
-    }
-  }
-}
-
-
-.digit-card-input-field {
-  @apply outline-none mt-sm block w-full h-10 bg-white text-form-field;
-  padding-left: theme(digitv2.spacers.spacer3);
-  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height: theme(digitv2.spacers.spacer6);
-}
-
-.digit-card-inputError {
-  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
-  font-style: theme(digitv2.fontStyle.normal);
-  padding-left: theme(digitv2.spacers.spacer3);
-  font-family: theme(digitv2.fontFamily.sans);
-  font-size: theme(digitv2.spacers.spacer4);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height: theme(digitv2.spacers.spacer6);
-  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
-}
-
-.digit-employeeCard-input {
-  @extend .typography.text-body-s;
-  @apply outline-none block w-full h-10 bg-white text-form-field;
-  font-style: theme(digitv2.fontStyle.normal);
-  padding-left: theme(digitv2.spacers.spacer3);
-  font-family: theme(digitv2.fontFamily.sans);
-  font-size: theme(digitv2.spacers.spacer4);
-  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height: theme(digitv2.spacers.spacer6);
-}
-
-.digit-employeeCard-input:disabled {
-  @apply border-grey-dark text-grey-dark !important;
-  pointer-events: none !important;
-}
-
-.digit-employeeCard-input--front {
-  @extend .typography.text-body-s;
-  @apply flex items-center;
-  width: fit-content !important;
-  background: theme(colors.grey.mid);
-  border-right: 0;
-  padding-right: 0.313rem;
-}
-
-.digit-employeeCard-inputError {
-  @extend .typography.text-body-s;
-  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
-  font-style: theme(digitv2.fontStyle.normal);
-  padding-left: theme(digitv2.spacers.spacer3);
-  font-family: theme(digitv2.fontFamily.sans);
-  font-size: theme(digitv2.spacers.spacer4);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height: theme(digitv2.spacers.spacer6);
-  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
-}
-
-.digit-inputWrapper {
-  @apply flex justify-start;
-  max-width: 31.25rem;
-
-  div {
-    max-width: 5rem;
-  }
-
-  span {
-    margin-top: theme(digitv2.spacers.spacer4);
-    margin-left: 10%;
-    margin-right: 10%;
-  }
-}
-
-@screen dt {
-  .digit-card-input-field {
-    width: 30rem;
-  }
-
-  .digit-card-input-field-emp {
-    width: 15rem;
-  }
-
-  .digit-card-inputError {
-    width: 30rem;
-  }
-
-  .digit-employeeCard-input {
-    @apply w-full;
-  }
-
-  .digit-employeeCard-inputError {
-    @apply w-full;
-  }
-
-  .digit-card-textarea-field {
-    @apply w-full;
-    max-width: 33.75rem;
-  }
-
-  .card-input-emp {
-    width: 15rem;
-  }
-}
-
-.digit-citizenCard-input {
-  @extend .typography.text-body-s;
-  @apply outline-none block w-full h-10 bg-white;
-  font-style: theme(digitv2.fontStyle.normal);
-  padding-left: theme(digitv2.spacers.spacer3);
-  font-family: theme(digitv2.fontFamily.sans);
-  font-size: theme(digitv2.spacers.spacer4);
-  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height: theme(digitv2.spacers.spacer6);
-}
-
-.digit-citizenCard-input--front {
-  @extend .typography.text-body-s;
-  @apply flex items-center;
-  width: fit-content !important;
-  background: theme(colors.grey.mid);
-  border-right: 0;
-  padding-right: 0.313rem;
-}
-
-.digit-employeeCard-inputError {
-  @extend .typography.text-body-s;
-  @extend .light-input-border;
-  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
-  font-style: theme(digitv2.fontStyle.normal);
-  padding-left: theme(digitv2.spacers.spacer3);
-  font-family: theme(digitv2.fontFamily.sans);
-  font-size: theme(digitv2.spacers.spacer4);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height:theme(digitv2.spacers.spacer6);
-  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
-}
-
-.digit-card-inputError {
-  @extend .light-input-border;
-  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
-  font-family: theme(digitv2.fontFamily.sans);
-  padding-left: theme(digitv2.spacers.spacer3);
-  font-family: theme(digitv2.fontFamily.sans);
-  font-size: theme(digitv2.spacers.spacer4);
-  color: theme(digitv2.lightTheme.text-primary);
-  line-height: theme(digitv2.spacers.spacer6);
-  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
-}
-
-
-.input-container {
-  @apply relative flex items-center h-10;
-  max-width: 37.5rem;
-
-  &.date,
-  &.time,
-  &.geolocation,
-  &.password,
-  &.search,
-  &.passwordToText,
-  &.withIcon {
-    input {
-      padding-right: theme(digitv2.spacers.spacer10);
-    }
-  }
-
-  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
-    /* Media query for tablets */
-    max-width: 27.5rem;
-  }
-
-  @media (max-aspect-ratio: 9/16) {
-    /* Media query for mobile */
-    max-width: 20.5rem;
-    width: 100%;
-  }
-
-  @media (min-aspect-ratio: 3/4) {
-    /* Media query for desktop */
-    max-width: 37.5rem;
-  }
-
-}
-
-.input-container:focus-within {
-
-  .digit-numeric-button-prefix:not([readonly]),
-  .digit-numeric-button-suffix:not([readonly]),
-  .digit-prefix:not([readonly]),
-  .digit-suffix:not([readonly]),
-  input:not([readonly]) {
-    outline: none;
-    border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
-  }
-
-  .digit-numeric-button-prefix,
-  .digit-prefix {
-    border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
-  }
-
-  .digit-numeric-button-suffix,
-  .digit-suffix {
-    border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
-  }
-}
-
-.digit-prefix,
-.digit-suffix,
-.digit-numeric-button-prefix,
-.digit-numeric-button-suffix {
-  @apply font-bold text-center;
-  font-family: theme(digitv2.fontFamily.sans);
-  font-style: theme(digitv2.fontStyle.normal);
-  color: theme(digitv2.lightTheme.text-secondary);
-  font-size: theme(digitv2.spacers.spacer5);
-  height: theme(digitv2.spacers.spacer10) !important;
-  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-  line-height: 1.172rem;
-  background: theme(colors.grey.mid);
-  max-width: none !important;
-  flex: 0 0 2.5rem;
-}
-
-.digit-numeric-button-prefix,
-.digit-numeric-button-suffix {
-  width: theme(digitv2.spacers.spacer10) !important;
-  font-size: theme(digitv2.spacers.spacer6);
-}
-
-.digit-prefix,
-.digit-numeric-button-prefix {
-  border-right-style: hidden;
-}
-
-.digit-suffix,
-.digit-numeric-button-suffix {
-  border-left-style: hidden;
-}
-
-.digit-prefix,
-.digit-suffix {
-  @apply pointer-events-none;
-}
-
-.digit-text-input-customIcon {
-  @apply absolute w-6 h-6 cursor-pointer;
-  top: theme(digitv2.spacers.spacer2);
-  right: theme(digitv2.spacers.spacer3);
-
-  &.nonEditable,
-  &.disabled {
-    @apply pointer-events-none;
-  }
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-card-inputError {
+  @apply block w-full h-10 outline-none bg-white text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left:theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-text-input-field {
+  @apply relative w-full;
+
+  &.geolocation {
+    input {
+      @apply pointer-events-none;
+    }
+  }
+
+  &.numeric {
+    input {
+      @apply text-center overflow-hidden whitespace-no-wrap;
+      text-overflow: ellipsis;
+    }
+
+    .input-container:focus-within {
+      input {
+        border-left-style: hidden;
+        border-right-style: hidden;
+      }
+    }
+
+    &.numeric-buttons-only{
+      input{
+        pointer-events: none !important;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &.prefix {
+    .input-container:focus-within {
+      input {
+        border-left-style: hidden;
+      }
+    }
+  }
+
+  &.suffix {
+    .input-container:focus-within {
+      input {
+        border-right-style: hidden;
+      }
+    }
+  }
+
+  &.password {
+    input {
+      font-family: theme(digitv2.fontFamily.sans);
+      font-size: theme(digitv2.spacers.spacer4);
+      font-weight: 900;
+      line-height: theme(digitv2.spacers.spacer6);
+    }
+  }
+
+  &.disabled {
+
+    input,
+    .digit-prefix,
+    .digit-suffix,
+    .digit-numeric-button-prefix,
+    .digit-numeric-button-suffix {
+      pointer-events: none !important;
+      cursor: not-allowed;
+      background-color: theme(digitv2.lightTheme.generic-background);
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+      color: theme(digitv2.lightTheme.generic-divider);
+    }
+
+    input {
+      background-color: white;
+    }
+
+    .digit-numeric-button-prefix,
+    .digit-prefix {
+      border-right-style: hidden;
+    }
+
+    .digit-numeric-button-suffix,
+    .digit-suffix {
+      border-left-style: hidden;
+    }
+  }
+
+  input[type="time"]::-webkit-calendar-picker-indicator,
+  input[type="date"]::-webkit-calendar-picker-indicator,
+  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
+  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
+    @apply absolute cursor-pointer w-6 h-6;
+    right: theme(digitv2.spacers.spacer3);
+  }
+
+  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
+  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
+    visibility: visible;
+    filter: invert(85%) sepia(0%) saturate(337%) hue-rotate(50deg) brightness(99%) contrast(99%);
+  }
+
+  input[type="date"][value=""]::-webkit-datetime-edit,
+  input[type="time"][value=""]::-webkit-datetime-edit,
+  input[type="date"]:disabled::-webkit-datetime-edit,
+  input[type="time"]:disabled::-webkit-datetime-edit,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-clear-button {
+    display: none;
+  }
+
+  ::placeholder,
+  input[type="date"][value=""]:not(:placeholder-shown)::before,
+  input[type="time"][value=""]:not(:placeholder-shown)::before {
+    content: attr(placeholder);
+    color: theme(digitv2.lightTheme.text-disabled);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-weight: theme(digitv2.fontWeight.regular);
+    font-size: theme(digitv2.spacers.spacer4);
+    line-height: theme(digitv2.spacers.spacer6);
+  }
+
+  &.noneditable {
+
+    .digit-prefix,
+    .digit-suffix,
+    .digit-numeric-button-prefix,
+    .digit-numeric-button-suffix {
+      pointer-events: none !important;
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+      background: theme(digitv2.lightTheme.generic-background);
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+
+    input {
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+      background: theme(digitv2.lightTheme.generic-background);
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+
+    .digit-numeric-button-prefix,
+    .digit-prefix {
+      border-right-style: hidden;
+    }
+
+    .digit-numeric-button-suffix,
+    .digit-suffix {
+      border-left-style: hidden;
+    }
+
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator {
+      visibility: visible;
+      filter: invert(74%) sepia(7%) saturate(64%) hue-rotate(144deg) brightness(98%) contrast(89%);
+    }
+  }
+
+  &.error {
+
+    input,
+    .digit-prefix,
+    .digit-suffix,
+    .digit-numeric-button-prefix,
+    .digit-numeric-button-suffix {
+      border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+    }
+
+    .digit-numeric-button-prefix,
+    .digit-prefix {
+      border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+    }
+
+    .digit-numeric-button-suffix,
+    .digit-suffix {
+      border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+    }
+
+    &.numeric {
+      input {
+        border-left-style: hidden;
+        border-right-style: hidden;
+      }
+    }
+
+    &.suffix {
+      input {
+        border-right-style: hidden;
+      }
+    }
+
+    &.prefix {
+      input {
+        border-left-style: hidden;
+      }
+    }
+  }
+}
+
+
+.digit-card-input-field {
+  @apply outline-none mt-sm block w-full h-10 bg-white text-form-field;
+  padding-left: theme(digitv2.spacers.spacer3);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+}
+
+.digit-card-inputError {
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-employeeCard-input {
+  @extend .typography.text-body-s;
+  @apply outline-none block w-full h-10 bg-white text-form-field;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+}
+
+.digit-employeeCard-input:disabled {
+  @apply border-grey-dark text-grey-dark !important;
+  pointer-events: none !important;
+}
+
+.digit-employeeCard-input--front {
+  @extend .typography.text-body-s;
+  @apply flex items-center;
+  width: fit-content !important;
+  background: theme(colors.grey.mid);
+  border-right: 0;
+  padding-right: 0.313rem;
+}
+
+.digit-employeeCard-inputError {
+  @extend .typography.text-body-s;
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-inputWrapper {
+  @apply flex justify-start;
+  max-width: 31.25rem;
+
+  div {
+    max-width: 5rem;
+  }
+
+  span {
+    margin-top: theme(digitv2.spacers.spacer4);
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+}
+
+@screen dt {
+  .digit-card-input-field {
+    width: 30rem;
+  }
+
+  .digit-card-input-field-emp {
+    width: 15rem;
+  }
+
+  .digit-card-inputError {
+    width: 30rem;
+  }
+
+  .digit-employeeCard-input {
+    @apply w-full;
+  }
+
+  .digit-employeeCard-inputError {
+    @apply w-full;
+  }
+
+  .digit-card-textarea-field {
+    @apply w-full;
+    max-width: 33.75rem;
+  }
+
+  .card-input-emp {
+    width: 15rem;
+  }
+}
+
+.digit-citizenCard-input {
+  @extend .typography.text-body-s;
+  @apply outline-none block w-full h-10 bg-white;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+}
+
+.digit-citizenCard-input--front {
+  @extend .typography.text-body-s;
+  @apply flex items-center;
+  width: fit-content !important;
+  background: theme(colors.grey.mid);
+  border-right: 0;
+  padding-right: 0.313rem;
+}
+
+.digit-employeeCard-inputError {
+  @extend .typography.text-body-s;
+  @extend .light-input-border;
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height:theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-card-inputError {
+  @extend .light-input-border;
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-family: theme(digitv2.fontFamily.sans);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+
+.input-container {
+  @apply relative flex items-center h-10;
+  max-width: 37.5rem;
+
+  &.date,
+  &.time,
+  &.geolocation,
+  &.password,
+  &.search,
+  &.passwordToText,
+  &.withIcon {
+    input {
+      padding-right: theme(digitv2.spacers.spacer10);
+    }
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 100%;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+  }
+
+}
+
+.input-container:focus-within {
+
+  .digit-numeric-button-prefix:not([readonly]),
+  .digit-numeric-button-suffix:not([readonly]),
+  .digit-prefix:not([readonly]),
+  .digit-suffix:not([readonly]),
+  input:not([readonly]) {
+    outline: none;
+    border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
+  .digit-numeric-button-prefix,
+  .digit-prefix {
+    border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
+  }
+
+  .digit-numeric-button-suffix,
+  .digit-suffix {
+    border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
+  }
+}
+
+.digit-prefix,
+.digit-suffix,
+.digit-numeric-button-prefix,
+.digit-numeric-button-suffix {
+  @apply font-bold text-center;
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  color: theme(digitv2.lightTheme.text-secondary);
+  font-size: theme(digitv2.spacers.spacer5);
+  height: theme(digitv2.spacers.spacer10) !important;
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  line-height: 1.172rem;
+  background: theme(colors.grey.mid);
+  max-width: none !important;
+  flex: 0 0 2.5rem;
+}
+
+.digit-numeric-button-prefix,
+.digit-numeric-button-suffix {
+  width: theme(digitv2.spacers.spacer10) !important;
+  font-size: theme(digitv2.spacers.spacer6);
+}
+
+.digit-prefix,
+.digit-numeric-button-prefix {
+  border-right-style: hidden;
+}
+
+.digit-suffix,
+.digit-numeric-button-suffix {
+  border-left-style: hidden;
+}
+
+.digit-prefix,
+.digit-suffix {
+  @apply pointer-events-none;
+}
+
+.digit-text-input-customIcon {
+  @apply absolute w-6 h-6 cursor-pointer;
+  top: theme(digitv2.spacers.spacer2);
+  right: theme(digitv2.spacers.spacer3);
+
+  &.nonEditable,
+  &.disabled {
+    @apply pointer-events-none;
+  }
 }