diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
index d349bfeaec0..228ae5933b7 100755
--- a/packages/calcite-components/src/components/input-number/input-number.scss
+++ b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -1,424 +1,26 @@
-:host {
-  @apply block;
-}
-
-// scales
-:host([scale="s"]) {
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-n2h h-6 px-2;
-  }
-  & .number-button-wrapper,
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-6;
-  }
-  & .clear-button {
-    min-block-size: theme("spacing.6");
-    min-inline-size: theme("spacing.6");
-  }
-}
-
-:host([scale="m"]) {
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-n1h h-8 px-3;
-  }
-  & .number-button-wrapper,
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-8;
-  }
-  & .clear-button {
-    min-block-size: theme("spacing.8");
-    min-inline-size: theme("spacing.8");
-  }
-}
-
-:host([scale="l"]) {
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-0h h-11 px-4;
-  }
-  & .number-button-wrapper,
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-11;
-  }
-  & .clear-button {
-    min-block-size: theme("spacing.11");
-    min-inline-size: theme("spacing.11");
-  }
-}
-
-@include disabled();
-
-input {
-  transition:
-    var(--calcite-animation-timing),
-    block-size 0,
-    outline-offset 0s;
-  -webkit-appearance: none;
-  @apply bg-foreground-1
-    box-border
-    flex
-    flex-1
-    font-inherit
-    font-normal
-    m-0
-    max-h-full
-    max-w-full
-    relative
-    rounded-none
-    text-color-1
-    text-ellipsis
-    w-full;
-
-  &:placeholder-shown {
-    @apply text-ellipsis;
-  }
-}
-
-// states
-input {
-  @apply text-color-1
-    border-color-input
-    border
-    border-solid;
-  &::placeholder,
-  &:-ms-input-placeholder,
-  &::-ms-input-placeholder {
-    @apply text-color-3 font-normal;
-  }
-}
-input:focus {
-  @apply border-color-brand text-color-1;
-}
-input[readonly] {
-  @apply bg-background font-medium;
-}
-input[readonly]:focus {
-  @apply text-color-1;
-}
-calcite-icon {
-  @apply text-color-3;
-}
-
-//focus
-input {
-  @apply focus-base;
-}
-
-input:focus {
-  @apply focus-inset;
-}
-
-:host([status="invalid"]) {
-  & input {
-    @apply border-color-danger;
-  }
-  & input:focus {
-    @apply focus-inset-danger;
-  }
-}
-
-// ICONS
-
-// position icons
-
-:host([scale="s"]) .icon {
-  inset-inline-start: theme("spacing.2");
-}
-
-:host([scale="m"]) .icon {
-  inset-inline-start: theme("spacing.3");
-}
-
-:host([scale="l"]) .icon {
-  inset-inline-start: theme("spacing.4");
-}
-
-// position placeholder/value text in relation to icons
-
-:host([icon][scale="s"]) input {
-  padding-inline-start: theme("padding.8");
-}
-
-:host([icon][scale="m"]) input {
-  padding-inline-start: theme("padding.10");
-}
-
-:host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.14");
-}
-
-// positioning wrapper for icon and loader
-
-.element-wrapper {
-  @apply relative
-    order-3
-    inline-flex
-    flex-1
-    items-center;
-}
-
-.icon {
-  @apply transition-default
-    pointer-events-none
-    absolute
-    block
-
-    z-default; // needed for firefox to display the icon properly
-}
-
-.clear-button {
-  pointer-events: initial;
-  @apply focus-base
-    border-color-input
-    bg-foreground-1
-    order-4
-    m-0
-    box-border
-    flex
-    min-h-full
-    cursor-pointer
-    items-center
-    justify-center
-    self-stretch
-    border
-    border-solid;
-
-  border-inline-start-width: theme("borderWidth.0");
-
-  &:hover {
-    @apply bg-foreground-2 transition-default;
-    calcite-icon {
-      @apply text-color-1 transition-default;
-    }
-  }
-  &:active {
-    @apply bg-foreground-3;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-  &:focus {
-    @apply focus-inset;
-  }
-  &:disabled {
-    @apply opacity-disabled;
-  }
-}
-
-// loading
-.loader {
-  inset-block-start: 1px;
-  inset-inline: 1px;
-  @apply pointer-events-none
-    absolute
-    block;
-}
-
-// slotted action
-.action-wrapper {
-  @apply order-7 flex;
-}
-
-// prefix and suffix
-.prefix,
-.suffix {
-  @apply border-color-input
-    bg-background
-    text-color-2
-    box-border
-    flex
-    h-auto
-    min-h-full
-    select-none
-    content-center
-    items-center
-    break-words
-    border
-    border-solid
-    font-medium
-    leading-none;
-}
-
-.prefix {
-  @apply order-2;
-  border-inline-end-width: theme("borderWidth.0");
-}
-.suffix {
-  @apply order-5;
-  border-inline-start-width: theme("borderWidth.0");
-}
-
-// alignment type
-:host([alignment="start"]) {
-  & input {
-    text-align: start;
-  }
-}
-
-:host([alignment="end"]) {
-  & input {
-    text-align: end;
-  }
-}
-
-.number-button-wrapper {
-  @apply transition-default
-    pointer-events-none
-    order-6
-    box-border
-    flex
-    flex-col;
-}
-
-:host([number-button-type="vertical"]) .wrapper {
-  flex-direction: row;
-  display: flex;
-}
-
-:host([number-button-type="vertical"]) {
-  & input {
-    @apply order-2;
-  }
-}
-
-:host([number-button-type="horizontal"]) .calcite--rtl {
-  & .number-button-item[data-adjustment="down"] calcite-icon {
-    transform: rotate(-90deg);
-  }
-  & .number-button-item[data-adjustment="up"] calcite-icon {
-    transform: rotate(-90deg);
-  }
-}
-
-.number-button-item.number-button-item--horizontal {
-  &[data-adjustment="down"],
-  &[data-adjustment="up"] {
-    @apply order-1
-      max-h-full
-      min-h-full
-      self-stretch;
-    & calcite-icon {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.number-button-item.number-button-item--horizontal[data-adjustment="down"] {
-  @apply border-color-input
-    border
-    border-solid;
-  border-inline-end-width: theme("borderWidth.0");
-  &:hover {
-    @apply bg-foreground-2;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-}
-
-.number-button-item.number-button-item--horizontal[data-adjustment="up"] {
-  @apply order-5;
-  &:hover {
-    @apply bg-foreground-2;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-}
-
-:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"]:hover {
-  @apply bg-foreground-2;
-  calcite-icon {
-    @apply text-color-1;
-  }
-}
-
-:host([number-button-type="vertical"]) .number-button-item[data-adjustment="up"]:hover {
-  @apply bg-foreground-2;
-  calcite-icon {
-    @apply text-color-1;
-  }
-}
-
-:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"] {
-  @apply border-t-0;
-}
-
-.number-button-item {
-  max-block-size: 50%;
-  min-block-size: 50%;
-  pointer-events: initial;
-  @apply border-color-input
-    bg-foreground-1
-    transition-default
-    m-0
-    box-border
-    flex
-    cursor-pointer
-    items-center
-    self-center
-    border
-    border-solid
-    py-0
-    px-2;
-  border-inline-start-width: theme("borderWidth.0");
-  & calcite-icon {
-    @apply transition-default pointer-events-none;
-  }
-  &:focus {
-    @apply bg-foreground-2;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-  &:active {
-    @apply bg-foreground-3;
-  }
-  &:disabled {
-    @apply pointer-events-none;
-  }
-}
-
-.wrapper {
-  @apply relative
-    flex
-    flex-row
-    items-center;
-}
-
-:host(.no-bottom-border) input {
-  @apply border-b-0;
-}
-
-:host(.border-top-color-one) input {
-  @apply border-t-color-1;
-}
-
-// input needed for higher specificity of these overrides
-input {
-  &.inline-child {
-    @apply transition-default bg-transparent;
-    .editing-enabled {
-      background-color: inherit;
-    }
-  }
-
-  &.inline-child:not(.editing-enabled) {
-    @apply border-color-transparent
-    flex
-    cursor-pointer text-ellipsis;
-    padding-inline-start: 0;
-  }
-}
-
-@include form-validation-message();
-@include hidden-form-input();
-@include base-component();
+@import "assets/mixins";
+
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-input-number-corner-radius: defines the border radius of the component.
+ * @prop --calcite-input-number-text-color: defines the text color of the component.
+ * @prop --calcite-input-number-border-color: defines the border color of the component. This token is reassigned on `:host([status="invalid"])` and `:host(:focus)`
+ * @prop --calcite-input-number-background-color: defines the background color of the component. This token is reassigned on `:host([read-only])`
+ * @prop --calcite-input-number-button-background-color: defines the background color of a button element in the component. This token is reassigned by `--calcite-input-number-button-background-color-hover` on `:hover` and `--calcite-input-number-button-background-color-active` on `:active`
+ * @prop --calcite-input-number-button-background-color-hover: defines the background color of a :hover-ed button element in the component.
+ * @prop --calcite-input-number-button-background-color-active: defines the background color of an :active button element in the component.
+ * @prop --calcite-input-number-icon-color: defines the color of an icon element in the component. This token is redefined by `--calcite-input-number-button-icon-color-hover` when the sub-component is `:hover` or `:active`
+ * @prop --calcite-input-number-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component.
+ * @prop --calcite-input-number-prefix-text-color: defines the prefix text color in the component.
+ * @prop --calcite-input-number-prefix-background-color: defines the prefix background color in the component.
+ * @prop --calcite-input-number-suffix-text-color: defines the suffix text color in the component.
+ * @prop --calcite-input-number-suffix-background-color: defines the suffix background color in the component.
+ * @prop --calcite-input-number-placeholder-text-color: defines the color of placeholder text in the component.
+ * @prop --calcite-input-number-shadow: defines the box-shadow of the component.
+ *
+ */
+
+@include input("input-number", "number");
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index d46e7ec4315..c4fc620c8f3 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -1,348 +1,26 @@
-:host {
-  @apply block;
-}
-
-// scales
-:host([scale="s"]) {
-  & input {
-    padding-inline-start: theme("spacing.2");
-    padding-inline-end: var(--calcite-internal-input-text-input-padding-inline-end, theme("spacing.2"));
-  }
-
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-n2h h-6;
-  }
-
-  & .prefix,
-  & .suffix {
-    @apply px-2;
-  }
-
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-6;
-  }
-
-  & .clear-button {
-    min-block-size: theme("spacing.6");
-    min-inline-size: theme("spacing.6");
-  }
-}
-
-:host([scale="m"]) {
-  & input {
-    padding-inline-start: theme("spacing.3");
-    padding-inline-end: var(--calcite-internal-input-text-input-padding-inline-end, theme("spacing.3"));
-  }
-
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-n1h h-8;
-  }
-
-  & .prefix,
-  & .suffix {
-    @apply px-3;
-  }
-
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-8;
-  }
-
-  & .clear-button {
-    min-block-size: theme("spacing.8");
-    min-inline-size: theme("spacing.8");
-  }
-}
-
-:host([scale="l"]) {
-  & input {
-    padding-inline-start: theme("spacing.4");
-    padding-inline-end: var(--calcite-internal-input-text-input-padding-inline-end, theme("spacing.4"));
-  }
-
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-0h h-11;
-  }
-
-  & .prefix,
-  & .suffix {
-    @apply px-4;
-  }
-
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-11;
-  }
-
-  & .clear-button {
-    min-block-size: theme("spacing.11");
-    min-inline-size: theme("spacing.11");
-  }
-}
-
-@include disabled();
-
-input {
-  transition:
-    var(--calcite-animation-timing),
-    block-size 0,
-    outline-offset 0s;
-  -webkit-appearance: none;
-  @apply bg-foreground-1
-    box-border
-    flex
-    flex-1
-    font-inherit
-    font-normal
-    m-0
-    max-h-full
-    max-w-full
-    relative
-    rounded-none
-    text-color-1
-    text-ellipsis
-    w-full;
-
-  &:placeholder-shown {
-    @apply text-ellipsis;
-  }
-}
-
-// states
-input {
-  @apply text-color-1
-    border-color-input
-    border
-    border-solid;
-  &::placeholder,
-  &:-ms-input-placeholder,
-  &::-ms-input-placeholder {
-    @apply text-color-3 font-normal;
-  }
-}
-input:focus {
-  @apply border-color-brand text-color-1;
-}
-input[readonly] {
-  @apply bg-background font-medium;
-}
-input[readonly]:focus {
-  @apply text-color-1;
-}
-calcite-icon {
-  @apply text-color-3;
-}
-
-//focus
-
-input {
-  @apply focus-base;
-}
-input:focus {
-  @apply focus-inset;
-}
-
-:host([status="invalid"]) {
-  & input {
-    @apply border-color-danger;
-  }
-  & input:focus {
-    @apply focus-inset-danger;
-  }
-}
-
-// ICONS
-
-// position icons
-
-:host([scale="s"]) .icon {
-  inset-inline-start: theme("spacing.2");
-}
-
-:host([scale="m"]) .icon {
-  inset-inline-start: theme("spacing.3");
-}
-
-:host([scale="l"]) .icon {
-  inset-inline-start: theme("spacing.4");
-}
-
-// position placeholder/value text in relation to icons
-
-:host([icon][scale="s"]) input {
-  padding-inline-start: theme("padding.8");
-}
-
-:host([icon][scale="m"]) input {
-  padding-inline-start: theme("padding.10");
-}
-
-:host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.14");
-}
-
-// positioning wrapper for icon and loader
-
-.element-wrapper {
-  @apply relative
-    order-3
-    inline-flex
-    flex-1
-    items-center;
-}
-
-.icon {
-  @apply transition-default
-    pointer-events-none
-    absolute
-    block
-
-    z-default; // needed for firefox to display the icon properly
-}
-
-// hide browser default clear
-
-input[type="text"]::-ms-clear,
-input[type="text"]::-ms-reveal {
-  @apply hidden
-    h-0
-    w-0;
-}
-
-.clear-button {
-  pointer-events: initial;
-  @apply focus-base
-    border-color-input
-    bg-foreground-1
-    order-4
-    m-0
-    box-border
-    flex
-    min-h-full
-    cursor-pointer
-    items-center
-    justify-center
-    self-stretch
-    border
-    border-solid;
-
-  border-inline-start-width: theme("borderWidth.0");
-
-  &:hover {
-    @apply bg-foreground-2 transition-default;
-    calcite-icon {
-      @apply text-color-1 transition-default;
-    }
-  }
-  &:active {
-    @apply bg-foreground-3;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-  &:focus {
-    @apply focus-inset;
-  }
-  &:disabled {
-    @apply opacity-disabled;
-  }
-}
-
-// loading
-.loader {
-  inset-block-start: 1px;
-  inset-inline: 1px;
-  @apply pointer-events-none
-    absolute
-    block;
-}
-
-// slotted action
-.action-wrapper {
-  @apply order-7 flex;
-}
-
-// prefix and suffix
-.prefix,
-.suffix {
-  @apply border-color-input
-    bg-background
-    text-color-2
-    box-border
-    flex
-    h-auto
-    min-h-full
-    select-none
-    content-center
-    items-center
-    break-words
-    border
-    border-solid
-    font-medium
-    leading-none;
-}
-
-.prefix {
-  @apply order-2;
-  border-inline-end-width: theme("borderWidth.0");
-}
-.suffix {
-  @apply order-5;
-  border-inline-start-width: theme("borderWidth.0");
-}
-
-// alignment type
-:host([alignment="start"]) {
-  & input {
-    text-align: start;
-  }
-}
-
-:host([alignment="end"]) {
-  & input {
-    text-align: end;
-  }
-}
-
-.wrapper {
-  @apply relative
-    flex
-    flex-row
-    items-center;
-}
-
-:host(.no-bottom-border) input {
-  @apply border-b-0;
-}
-
-:host(.border-top-color-one) input {
-  @apply border-t-color-1;
-}
-
-// input needed for higher specificity of these overrides
-input {
-  &.inline-child {
-    @apply transition-default bg-transparent;
-    .editing-enabled {
-      background-color: inherit;
-    }
-  }
-
-  &.inline-child:not(.editing-enabled) {
-    @apply border-color-transparent
-    flex
-    cursor-pointer text-ellipsis;
-    padding-inline-start: 0;
-  }
-}
-
-@include form-validation-message();
-@include hidden-form-input();
-@include base-component();
+@import "assets/mixins";
+
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-input-text-number-corner-radius: defines the border radius of the component.
+ * @prop --calcite-input-text-number-text-color: defines the text color of the component.
+ * @prop --calcite-input-text-number-border-color: defines the border color of the component. This token is reassigned on `:host([status="invalid"])` and `:host(:focus)`
+ * @prop --calcite-input-text-number-background-color: defines the background color of the component. This token is reassigned on `:host([read-only])`
+ * @prop --calcite-input-text-number-button-background-color: defines the background color of a button element in the component. This token is reassigned by `--calcite-input-text-number-button-background-color-hover` on `:hover` and `--calcite-input-text-number-button-background-color-active` on `:active`
+ * @prop --calcite-input-text-number-button-background-color-hover: defines the background color of a :hover-ed button element in the component.
+ * @prop --calcite-input-text-number-button-background-color-active: defines the background color of an :active button element in the component.
+ * @prop --calcite-input-text-number-icon-color: defines the color of an icon element in the component. This token is redefined by `--calcite-input-text-number-button-icon-color-hover` when the sub-component is `:hover` or `:active`
+ * @prop --calcite-input-text-number-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component.
+ * @prop --calcite-input-text-number-prefix-text-color: defines the prefix text color in the component.
+ * @prop --calcite-input-text-number-prefix-background-color: defines the prefix background color in the component.
+ * @prop --calcite-input-text-number-suffix-text-color: defines the suffix text color in the component.
+ * @prop --calcite-input-text-number-suffix-background-color: defines the suffix background color in the component.
+ * @prop --calcite-input-text-number-placeholder-text-color: defines the color of placeholder text in the component.
+ * @prop --calcite-input-text-number-shadow: defines the box-shadow of the component.
+ *
+ */
+
+@include input("input-text", "text");
diff --git a/packages/calcite-components/src/components/input/assets/_mixins.scss b/packages/calcite-components/src/components/input/assets/_mixins.scss
new file mode 100644
index 00000000000..aaf2dcb0d0e
--- /dev/null
+++ b/packages/calcite-components/src/components/input/assets/_mixins.scss
@@ -0,0 +1,819 @@
+@mixin setOnInputEl($type) {
+  @if ($type == "*") {
+    textarea,
+    input {
+      @content;
+    }
+  } @else if ($type == "textarea") {
+    textarea {
+      @content;
+    }
+  } @else {
+    input {
+      @content;
+    }
+  }
+}
+
+@mixin setInputTokens($component: "input", $subcomponent: "") {
+  // Set Defaults
+  @if ($subcomponent == "") {
+    :host {
+      --calcite-#{$component}-corner-radius: var(--calcite-corner-radius);
+      --calcite-#{$component}-text-color: var(--calcite-color-text-1);
+      --calcite-#{$component}-border-color: var(--calcite-color-border-input);
+      --calcite-#{$component}-background-color: var(--calcite-color-foreground-1);
+      --calcite-#{$component}-shadow: none;
+      // Button
+      --calcite-#{$component}-button-background-color: var(--calcite-color-foreground-1);
+      --calcite-#{$component}-button-background-color-hover: var(--calcite-color-foreground-2);
+      --calcite-#{$component}-button-background-color-active: var(--calcite-color-foreground-3);
+
+      // Icon
+      --calcite-#{$component}-icon-color: var(--calcite-color-text-3);
+      --calcite-#{$component}-button-icon-color-hover: var(--calcite-color-text-1);
+
+      // Prefix/Suffix
+      --calcite-#{$component}-prefix-text-color: var(--calcite-color-text-2);
+      --calcite-#{$component}-prefix-background-color: var(--calcite-color-background);
+      --calcite-#{$component}-suffix-text-color: var(--calcite-color-text-2);
+      --calcite-#{$component}-suffix-background-color: var(--calcite-color-background);
+
+      // Placeholder
+      --calcite-#{$component}-placeholder-text-color: var(--calcite-color-text-3);
+
+      // For props that should follow the initial border-color but not change on statechange.
+      --calcite-internal-#{$component}-border-color-base: var(--calcite-color-border-input);
+      --calcite-internal-#{$component}-outline-color: var(--calcite-color-brand);
+    }
+  } @else {
+    calcite-#{$subcomponent} {
+      --calcite-#{$subcomponent}-corner-radius: var(--calcite-#{$component}-#{$subcomponent}-corner-radius);
+      --calcite-#{$subcomponent}-text-color: var(--calcite-#{$component}-#{$subcomponent}-text-color);
+      --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color);
+      --calcite-#{$subcomponent}-background-color: var(--calcite-#{$component}-#{$subcomponent}-background-color);
+      --calcite-#{$subcomponent}-button-background-color: var(
+        --calcite-#{$component}-#{$subcomponent}-button-background-color
+      );
+      --calcite-#{$subcomponent}-button-background-color-hover: var(
+        --calcite-#{$component}-#{$subcomponent}-button-background-color-hover
+      );
+      --calcite-#{$subcomponent}-button-background-color-active: var(
+        --calcite-#{$component}-#{$subcomponent}-button-background-color-active
+      );
+      --calcite-#{$subcomponent}-icon-color: var(--calcite-#{$component}-#{$subcomponent}-icon-color);
+      --calcite-#{$subcomponent}-button-icon-color-hover: var(
+        --calcite-#{$component}-#{$subcomponent}-button-icon-color-hover
+      );
+      --calcite-#{$subcomponent}-prefix-text-color: var(--calcite-#{$component}-#{$subcomponent}-prefix-text-color);
+      --calcite-#{$subcomponent}-prefix-background-color: var(
+        --calcite-#{$component}-#{$subcomponent}-prefix-background-color
+      );
+      --calcite-#{$subcomponent}-suffix-text-color: var(--calcite-#{$component}-#{$subcomponent}-suffix-text-color);
+      --calcite-#{$subcomponent}-suffix-background-color: var(
+        --calcite-#{$component}-#{$subcomponent}-suffix-background-color
+      );
+      --calcite-#{$subcomponent}-placeholder-text-color: var(
+        --calcite-#{$component}-#{$subcomponent}-placeholder-text-color
+      );
+    }
+  }
+
+  // Set on state change
+  @if ($subcomponent == "") {
+    // Status
+    :host([status="invalid"]) {
+      --calcite-#{$component}-border-color: var(--calcite-color-status-danger);
+      --calcite-internal-#{$component}-outline-color: var(--calcite-color-status-danger);
+    }
+    :host(:focus) {
+      --calcite-#{$component}-border-color: var(--calcite-color-brand);
+    }
+    :host([read-only]) {
+      --calcite-#{$component}-background-color: var(--calcite-color-background);
+    }
+  } @else {
+    calcite-#{$subcomponent}[status="invalid"] {
+      --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color-invalid);
+    }
+    calcite-#{$subcomponent}:focus {
+      --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color-focus);
+    }
+    calcite-#{$subcomponent}[read-only] {
+      --calcite-#{$subcomponent}-background-color: var(
+        --calcite-#{$component}-#{$subcomponent}-background-color-read-only
+      );
+    }
+  }
+}
+
+@mixin input($component: "input", $type: "*") {
+  @include setInputTokens($component);
+
+  :host {
+    @apply block;
+    box-shadow: var(--calcite-#{$component}-shadow);
+  }
+
+  @include disabled() {
+    @if ($type == "textarea") or ($type == "*") {
+      textarea {
+        resize: none;
+      }
+    }
+  }
+
+  // Scale
+  :host([scale="s"]) {
+    @if ($type == "textarea") {
+      .prefix,
+      .suffix {
+        @apply text-n2h h-6 px-2;
+      }
+    } @else {
+      input,
+      .prefix,
+      .suffix {
+        @apply text-n2h h-6 px-2;
+      }
+    }
+    @if ($type == "number") or ($type == "*") {
+      .number-button-wrapper,
+      .action-wrapper calcite-button,
+      .action-wrapper calcite-button button {
+        @apply h-6;
+      }
+    } @else {
+      .action-wrapper calcite-button,
+      .action-wrapper calcite-button button {
+        @apply h-6;
+      }
+    }
+    @if ($type == "file") or ($type == "*") {
+      input[type="file"] {
+        @apply h-6;
+      }
+    }
+    @if ($type == "textarea") or ($type == "*") {
+      textarea {
+        @apply @apply text-n2h
+          py-1
+          px-2
+          h-6;
+        min-block-size: theme("spacing.6");
+      }
+      textarea {
+      }
+    }
+    @if ($type == "*") or not ($type == "textarea") {
+      input {
+        padding-inline-start: theme("padding.8");
+      }
+    }
+
+    .clear-button {
+      min-block-size: theme("spacing.6");
+      min-inline-size: theme("spacing.6");
+    }
+    .icon {
+      inset-inline-start: theme("spacing.2");
+    }
+  }
+  :host([scale="m"]) {
+    @if ($type == "textarea") {
+      .prefix,
+      .suffix {
+        @apply text-n1h h-8 px-3;
+      }
+    } @else {
+      input,
+      .prefix,
+      .suffix {
+        @apply text-n1h h-8 px-3;
+      }
+    }
+    @if ($type == "textarea") or ($type == "*") {
+      textarea {
+        @apply text-n1h
+          h-auto
+          py-2
+          px-3;
+        min-block-size: theme("spacing.8");
+      }
+    }
+    @if ($type == "number") or ($type == "*") {
+      .number-button-wrapper,
+      .action-wrapper calcite-button,
+      .action-wrapper calcite-button button {
+        @apply h-8;
+      }
+    } @else {
+      .action-wrapper calcite-button,
+      .action-wrapper calcite-button button {
+        @apply h-8;
+      }
+    }
+    @if ($type == "file") or ($type == "*") {
+      input[type="file"] {
+        @apply h-8;
+      }
+    }
+    @if ($type == "*") or not ($type == "textarea") {
+      input {
+        padding-inline-start: theme("padding.10");
+      }
+    }
+
+    .clear-button {
+      min-block-size: theme("spacing.8");
+      min-inline-size: theme("spacing.8");
+    }
+    .icon {
+      inset-inline-start: theme("spacing.3");
+    }
+  }
+  :host([scale="l"]) {
+    @if ($type == "textarea") {
+      .prefix,
+      .suffix {
+        @apply text-0h h-11 px-4;
+      }
+    } @else {
+      input,
+      .prefix,
+      .suffix {
+        @apply text-0h h-11 px-4;
+      }
+    }
+    @if ($type == "textarea") or ($type == "*") {
+      textarea {
+        @apply text-0h
+          h-auto
+          py-3
+          px-4;
+        min-block-size: theme("spacing.11");
+      }
+      .resize-icon-wrapper {
+        block-size: 18px;
+        inline-size: 18px;
+      }
+    }
+    @if ($type == "number") or ($type == "*") {
+      .number-button-wrapper,
+      .action-wrapper calcite-button,
+      .action-wrapper calcite-button button {
+        @apply h-11;
+      }
+    } @else {
+      .action-wrapper calcite-button,
+      .action-wrapper calcite-button button {
+        @apply h-11;
+      }
+    }
+    @if ($type == "file") or ($type == "*") {
+      input[type="file"] {
+        @apply h-11;
+      }
+    }
+    @if ($type == "*") or not ($type == "textarea") {
+      input {
+        padding-inline-start: theme("padding.14");
+      }
+    }
+
+    .clear-button {
+      min-block-size: theme("spacing.11");
+      min-inline-size: theme("spacing.11");
+    }
+    .icon {
+      inset-inline-start: theme("spacing.4");
+    }
+  }
+
+  // Alignment
+  :host([alignment="start"]) {
+    --calcite-internal-#{$component}-text-align: start;
+  }
+  :host([alignment="end"]) {
+    --calcite-internal-#{$component}-text-align: end;
+  }
+
+  // Border Radius (depending on ShadowDOM composition)
+  :host([number-button-type="horizontal"][type="number"]) {
+    .wrapper {
+      > button:first-child {
+        border-start-start-radius: var(--calcite-#{$component}-corner-radius);
+        border-end-start-radius: var(--calcite-#{$component}-corner-radius);
+      }
+
+      > button:last-of-type {
+        border-start-end-radius: var(--calcite-#{$component}-corner-radius);
+        border-end-end-radius: var(--calcite-#{$component}-corner-radius);
+      }
+    }
+
+    button + button,
+    input + button,
+    button + div,
+    input + div {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+    input {
+      border-radius: 0;
+    }
+  }
+  :host([number-button-type="vertical"][type="number"]) {
+    input,
+    textarea {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+    .number-button-item {
+      &:first-child {
+        border-start-end-radius: var(--calcite-#{$component}-corner-radius);
+      }
+      &:last-child {
+        border-end-end-radius: var(--calcite-#{$component}-corner-radius);
+      }
+    }
+  }
+  :host([prefix-text]) {
+    input,
+    textarea {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+  :host([suffix-text]) {
+    input,
+    textarea {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+  :host([suffix-text][type="number"]:not([read-only])) {
+    .suffix {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+  :host(:not([clearable], [suffix-text], [type="number"]:not([read-only]))) {
+    .wrapper:has(+ .validation-container) {
+      @include setOnInputEl($type) {
+        border-start-end-radius: var(--calcite-#{$component}-corner-radius);
+        border-end-end-radius: var(--calcite-#{$component}-corner-radius);
+      }
+    }
+  }
+  :host(:not([type="number"], [suffix-text])) {
+    @include setOnInputEl($type) {
+      &:has(+ .clear-button) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+    .clear-button {
+      border-start-end-radius: var(--calcite-#{$component}-corner-radius);
+      border-end-end-radius: var(--calcite-#{$component}-corner-radius);
+    }
+  }
+  .prefix {
+    border-start-start-radius: var(--calcite-#{$component}-corner-radius);
+    border-end-start-radius: var(--calcite-#{$component}-corner-radius);
+  }
+  .suffix {
+    border-start-end-radius: var(--calcite-#{$component}-corner-radius);
+    border-end-end-radius: var(--calcite-#{$component}-corner-radius);
+  }
+  :host(:not(:empty)) {
+    .clear-button {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+    @include setOnInputEl($type) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+  ::slotted(*) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: var(--calcite-#{$component}-corner-radius);
+    border-end-end-radius: var(--calcite-#{$component}-corner-radius);
+  }
+
+  // input, textarea
+  @include setOnInputEl($type) {
+    @apply border font-inherit relative m-0
+        box-border flex max-h-full w-full max-w-full flex-1 font-normal border-spacing-1
+        border-solid
+        text-ellipsis
+        focus-base;
+
+    transition:
+      var(--calcite-animation-timing),
+      block-size 0,
+      outline-offset 0s;
+    -webkit-appearance: none;
+    border-radius: var(--calcite-#{$component}-corner-radius);
+    color: var(--calcite-#{$component}-text-color);
+    border-color: var(--calcite-#{$component}-border-color);
+    background-color: var(--calcite-#{$component}-background-color);
+    text-align: var(--calcite-internal-#{$component}-text-align);
+
+    &::placeholder,
+    &:-ms-input-placeholder,
+    &::-ms-input-placeholder {
+      @apply font-normal;
+      color: var(--calcite-#{$component}-placeholder-text-color);
+    }
+    &:placeholder-shown {
+      @apply text-ellipsis;
+    }
+
+    // States
+    &:focus {
+      outline: 2px solid var(--calcite-internal-#{$component}-outline-color);
+      outline-offset: calc(-2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1)));
+    }
+    &[readonly] {
+      @apply font-medium;
+    }
+    &[type="search"]::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+
+    @if ($type == "text") or ($type == "*") {
+      // hide browser default clear
+      &[type="text"]::-ms-clear,
+      &[type="text"]::-ms-reveal {
+        @apply hidden
+          h-0
+          w-0;
+      }
+    }
+    @if ($type == "date") or ($type == "*") {
+      &[type="date"]::-webkit-input-placeholder {
+        visibility: hidden !important;
+      }
+    }
+    @if not($type == "textarea") {
+      @if ($type == "*") or ($type == "search") {
+        &[type="search"] {
+          &::-webkit-search-decoration,
+          &::-webkit-search-cancel-button,
+          &::-webkit-search-results-button,
+          &::-webkit-search-results-decoration {
+            @apply hidden;
+          }
+        }
+      }
+      @if ($type == "*") or ($type == "date") {
+        &[type="date"]::-webkit-clear-button {
+          @apply hidden;
+        }
+      }
+      @if ($type == "*") or ($type == "time") {
+        &[type="time"]::-webkit-clear-button {
+          @apply hidden;
+        }
+      }
+      @if ($type == "*") or ($type == "number") {
+        &[type="number"] {
+          -moz-appearance: textfield;
+
+          &::-webkit-inner-spin-button,
+          &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            -moz-appearance: textfield;
+            @apply m-0;
+          }
+        }
+      }
+    }
+  }
+
+  calcite-icon {
+    color: var(--calcite-#{$component}-icon-color);
+  }
+
+  button {
+    &:hover,
+    &:active {
+      --calcite-#{$component}-icon-color: var(--calcite-#{$component}-button-icon-color-hover);
+    }
+  }
+
+  .wrapper {
+    @apply relative
+      flex
+      flex-row
+      items-center;
+  }
+
+  .element-wrapper {
+    @apply relative
+      order-3
+      inline-flex
+      flex-1
+      items-center;
+  }
+
+  .icon {
+    @apply transition-default
+      pointer-events-none
+      absolute
+      block;
+  }
+  @if ($type == "textarea") or ($type == "*") {
+    .icon,
+    .resize-icon-wrapper {
+      @apply z-default; // needed for firefox to display the icon properly
+    }
+  } @else {
+    .icon {
+      @apply z-default; // needed for firefox to display the icon properly
+    }
+  }
+
+  .clear-button {
+    pointer-events: initial;
+    @apply focus-base
+      order-4
+      m-0
+      box-border
+      flex
+      min-h-full
+      cursor-pointer
+      items-center
+      justify-center
+      self-stretch
+      border
+      border-solid;
+
+    background-color: var(--calcite-#{$component}-button-background-color);
+    border-color: var(--calcite-internal-#{$component}-border-color-base);
+    border-inline-start-width: theme("borderWidth.0");
+
+    &:hover {
+      @apply transition-default;
+      --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-hover);
+
+      calcite-icon {
+        @apply transition-default;
+      }
+    }
+    &:active {
+      --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-active);
+    }
+    &:focus {
+      @apply focus-inset;
+    }
+    &:disabled {
+      @apply opacity-disabled;
+    }
+  }
+
+  // loading
+  .loader {
+    @apply pointer-events-none
+      absolute
+      block;
+
+    inset-block-start: 1px;
+    inset-inline: 1px;
+  }
+  :host(:not([suffix-text], [type="number"]):empty) {
+    .loader {
+      inset-inline-end: calc(var(--calcite-#{$component}-corner-radius, 0px) / 2);
+    }
+  }
+  :host(:not([prefix-text], [number-button-type="horizontal"][type="number"])) {
+    .loader {
+      inset-inline-start: calc(var(--calcite-#{$component}-corner-radius, 0px) / 2);
+    }
+  }
+
+  // slotted action
+  .action-wrapper {
+    @apply order-7 flex;
+  }
+
+  // prefix and suffix
+  .prefix,
+  .suffix {
+    @apply box-border
+      flex
+      h-auto
+      min-h-full
+      select-none
+      content-center
+      items-center
+      break-words
+      border
+      border-solid
+      font-medium
+      leading-none;
+    border-color: var(--calcite-internal-#{$component}-border-color-base);
+  }
+  .prefix {
+    @apply order-2;
+    border-inline-end-width: theme("borderWidth.0");
+    color: var(--calcite-#{$component}-prefix-text-color);
+    background-color: var(--calcite-#{$component}-prefix-background-color);
+  }
+  .suffix {
+    @apply order-5;
+    border-inline-start-width: theme("borderWidth.0");
+    color: var(--calcite-#{$component}-suffix-text-color);
+    background-color: var(--calcite-#{$component}-suffix-background-color);
+  }
+
+  @if ($type == "*") or ($type == "number") {
+    .number-button-wrapper {
+      @apply transition-default
+        pointer-events-none
+        order-6
+        box-border
+        flex
+        flex-col;
+    }
+    .number-button-item {
+      max-block-size: 50%;
+      min-block-size: 50%;
+      pointer-events: initial;
+      @apply transition-default
+        m-0
+        box-border
+        flex
+        cursor-pointer
+        items-center
+        self-center
+        border
+        border-solid
+        py-0
+        px-2;
+      border-color: var(--calcite-internal-#{$component}-border-color-base);
+      border-inline-start-width: theme("borderWidth.0");
+      background-color: var(--calcite-#{$component}-button-background-color);
+
+      &:focus,
+      &:hover {
+        --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-hover);
+      }
+      &:active {
+        --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-active);
+      }
+      &:disabled {
+        @apply pointer-events-none;
+      }
+
+      &.number-button-item--horizontal {
+        &[data-adjustment="down"],
+        &[data-adjustment="up"] {
+          @apply order-1
+            max-h-full
+            min-h-full
+            self-stretch;
+          & calcite-icon {
+            transform: rotate(90deg);
+          }
+        }
+      }
+      &.number-button-item--horizontal {
+        &[data-adjustment="up"] {
+          @apply order-5;
+        }
+        &[data-adjustment="down"] {
+          @apply border
+            border-solid;
+          border-inline-end-width: theme("borderWidth.0");
+        }
+      }
+
+      calcite-icon {
+        @apply transition-default pointer-events-none;
+      }
+    }
+
+    :host([number-button-type="vertical"]) {
+      input {
+        @apply order-2;
+      }
+      .wrapper {
+        flex-direction: row;
+        display: flex;
+      }
+      .number-button-item[data-adjustment="down"] {
+        @apply border-t-0;
+      }
+    }
+
+    :host([number-button-type="horizontal"]) {
+      .calcite--rtl {
+        & .number-button-item[data-adjustment="down"] calcite-icon {
+          transform: rotate(-90deg);
+        }
+        & .number-button-item[data-adjustment="up"] calcite-icon {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+  }
+  @if ($type == "*") or ($type == "date") {
+    // hide the default date picker
+    :input::-webkit-calendar-picker-indicator {
+      @apply hidden;
+    }
+  }
+  @if ($type == "*") or ($type == "textarea") {
+    // textarea resize icon
+    textarea::-webkit-resizer {
+      @apply absolute
+        bottom-0
+        box-border
+        py-0
+        px-1;
+      inset-inline-end: 0;
+    }
+
+    .resize-icon-wrapper {
+      inset-block-end: 2px;
+      inset-inline-end: 2px;
+      background-color: var(--calcite-#{$component}-button-background-color);
+
+      @apply pointer-events-none
+        absolute
+        h-3
+        w-3;
+
+      & calcite-icon {
+        inset-block-end: theme("spacing.1");
+        inset-inline-end: theme("spacing.1");
+        transform: rotate(-45deg);
+      }
+    }
+
+    .calcite--rtl {
+      .resize-icon-wrapper {
+        & calcite-icon {
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+  @if ($type == "*") or ($type == "color") {
+    :host([type="color"]) input {
+      @apply p-1;
+    }
+  }
+  @if ($type == "*") or ($type == "file") {
+    // file input
+    :host([type="file"]) input {
+      @apply cursor-pointer
+        border
+        border-dashed
+        text-center;
+    }
+    :host([type="file"][scale="s"]) input {
+      @apply py-px px-2;
+    }
+    :host([type="file"][scale="m"]) input {
+      @apply py-1 px-3;
+    }
+    :host([type="file"][scale="l"]) input {
+      @apply py-2 px-4;
+    }
+  }
+  @if not($type == "textarea") {
+    :host(.no-bottom-border) input {
+      @apply border-b-0;
+    }
+
+    :host(.border-top-color-one) input {
+      @apply border-t-color-1;
+    }
+
+    // input needed for higher specificity of these overrides
+    input {
+      &.inline-child {
+        @apply transition-default bg-transparent;
+        .editing-enabled {
+          background-color: inherit;
+        }
+      }
+
+      &.inline-child:not(.editing-enabled) {
+        @apply border-color-transparent
+          flex
+          cursor-pointer text-ellipsis;
+        padding-inline-start: 0;
+      }
+    }
+  }
+
+  @include form-validation-message();
+  @include hidden-form-input();
+  @include base-component();
+}
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index c5890155d41..a0e2959dd94 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -1,582 +1,26 @@
-:host {
-  @apply block;
-}
-
-// scales
-:host([scale="s"]) {
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-n2h h-6 px-2;
-  }
-  & textarea {
-    @apply h-6;
-    min-block-size: theme("spacing.6");
-  }
-  & .number-button-wrapper,
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-6;
-  }
-  & input[type="file"] {
-    @apply h-6;
-  }
-  & .clear-button {
-    min-block-size: theme("spacing.6");
-    min-inline-size: theme("spacing.6");
-  }
-  & textarea {
-    @apply text-n2h
-    h-auto
-    py-1
-    px-2;
-  }
-}
-
-:host([scale="m"]) {
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-n1h h-8 px-3;
-  }
-  & textarea {
-    min-block-size: theme("spacing.8");
-  }
-  & .number-button-wrapper,
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-8;
-  }
-  & input[type="file"] {
-    @apply h-8;
-  }
-  & .clear-button {
-    min-block-size: theme("spacing.8");
-    min-inline-size: theme("spacing.8");
-  }
-  & textarea {
-    @apply text-n1h
-      h-auto
-      py-2
-      px-3;
-  }
-}
-
-:host([scale="l"]) {
-  & input,
-  & .prefix,
-  & .suffix {
-    @apply text-0h h-11 px-4;
-  }
-  & textarea {
-    min-block-size: theme("spacing.11");
-  }
-  & .number-button-wrapper,
-  & .action-wrapper calcite-button,
-  & .action-wrapper calcite-button button {
-    @apply h-11;
-  }
-  & input[type="file"] {
-    @apply h-11;
-  }
-  & .clear-button {
-    min-block-size: theme("spacing.11");
-    min-inline-size: theme("spacing.11");
-  }
-  & textarea {
-    @apply text-0h
-      h-auto
-      py-3
-      px-4;
-  }
-}
-
-@include disabled() {
-  & textarea {
-    resize: none;
-  }
-}
-
-textarea,
-input {
-  transition:
-    var(--calcite-animation-timing),
-    block-size 0,
-    outline-offset 0s;
-  -webkit-appearance: none;
-  @apply font-inherit
-    text-color-1
-    bg-foreground-1
-    relative
-    m-0
-    box-border
-    flex
-    max-h-full
-    w-full
-    max-w-full
-    flex-1
-    rounded-none
-    font-normal;
-}
-
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-// states
-input,
-textarea {
-  @apply border
-    border-color-input
-    border-solid
-    text-color-1
-    text-ellipsis;
-  &::placeholder,
-  &:-ms-input-placeholder,
-  &::-ms-input-placeholder {
-    @apply text-color-3 font-normal;
-  }
-  &:placeholder-shown {
-    @apply text-ellipsis;
-  }
-}
-input:focus,
-textarea:focus {
-  @apply border-color-brand text-color-1;
-}
-input[readonly],
-textarea[readonly] {
-  @apply bg-background font-medium;
-}
-input[readonly]:focus,
-textarea[readonly]:focus {
-  @apply text-color-1;
-}
-calcite-icon {
-  @apply text-color-3;
-}
-
-//focus
-textarea,
-input {
-  @apply focus-base;
-}
-textarea:focus,
-input:focus {
-  @apply focus-inset;
-}
-
-:host([status="invalid"]) {
-  & input,
-  & textarea {
-    @apply border-color-danger;
-  }
-  & input:focus,
-  & textarea:focus {
-    @apply focus-inset-danger;
-  }
-}
-
-// ICONS
-
-// position icons
-
-:host([scale="s"]) .icon {
-  inset-inline-start: theme("spacing.2");
-}
-
-:host([scale="m"]) .icon {
-  inset-inline-start: theme("spacing.3");
-}
-
-:host([scale="l"]) .icon {
-  inset-inline-start: theme("spacing.4");
-}
-
-// position placeholder/value text in relation to icons
-
-:host([icon][scale="s"]) input {
-  padding-inline-start: theme("padding.8");
-}
-
-:host([icon][scale="m"]) input {
-  padding-inline-start: theme("padding.10");
-}
-
-:host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.14");
-}
-
-// positioning wrapper for icon and loader
-
-.element-wrapper {
-  @apply relative
-    order-3
-    inline-flex
-    flex-1
-    items-center;
-}
-
-.icon {
-  @apply transition-default
-    pointer-events-none
-    absolute
-    block;
-}
-
-.icon,
-.resize-icon-wrapper {
-  @apply z-default; // needed for firefox to display the icon properly
-}
-
-// hide browser default clear
-
-input[type="text"]::-ms-clear,
-input[type="text"]::-ms-reveal {
-  @apply hidden
-    h-0
-    w-0;
-}
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration,
-input[type="date"]::-webkit-clear-button,
-input[type="time"]::-webkit-clear-button {
-  @apply hidden;
-}
-
-.clear-button {
-  pointer-events: initial;
-  @apply focus-base
-    border-color-input
-    bg-foreground-1
-    order-4
-    m-0
-    box-border
-    flex
-    min-h-full
-    cursor-pointer
-    items-center
-    justify-center
-    self-stretch
-    border
-    border-solid;
-
-  border-inline-start-width: theme("borderWidth.0");
-
-  &:hover {
-    @apply bg-foreground-2 transition-default;
-    calcite-icon {
-      @apply text-color-1 transition-default;
-    }
-  }
-  &:active {
-    @apply bg-foreground-3;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-  &:focus {
-    @apply focus-inset;
-  }
-  &:disabled {
-    @apply opacity-disabled;
-  }
-}
-
-// loading
-.loader {
-  inset-block-start: 1px;
-  inset-inline: 1px;
-  @apply pointer-events-none
-    absolute
-    block;
-}
-
-// slotted action
-.action-wrapper {
-  @apply order-7 flex;
-}
-
-// prefix and suffix
-.prefix,
-.suffix {
-  @apply border-color-input
-    bg-background
-    text-color-2
-    box-border
-    flex
-    h-auto
-    min-h-full
-    select-none
-    content-center
-    items-center
-    break-words
-    border
-    border-solid
-    font-medium
-    leading-none;
-}
-
-.prefix {
-  @apply order-2;
-  border-inline-end-width: theme("borderWidth.0");
-}
-.suffix {
-  @apply order-5;
-  border-inline-start-width: theme("borderWidth.0");
-}
-
-// alignment type
-:host([alignment="start"]) {
-  & textarea,
-  & input {
-    text-align: start;
-  }
-}
-
-:host([alignment="end"]) {
-  & textarea,
-  & input {
-    text-align: end;
-  }
-}
-
-// number buttons
-input[type="number"] {
-  -moz-appearance: textfield;
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    -moz-appearance: textfield;
-    @apply m-0;
-  }
-}
-
-.number-button-wrapper {
-  @apply transition-default
-    pointer-events-none
-    order-6
-    box-border
-    flex
-    flex-col;
-}
-
-:host([number-button-type="vertical"]) .wrapper {
-  flex-direction: row;
-  display: flex;
-}
-
-:host([number-button-type="vertical"]) {
-  & input,
-  textarea {
-    @apply order-2;
-  }
-}
-
-:host([number-button-type="horizontal"]) .calcite--rtl {
-  & .number-button-item[data-adjustment="down"] calcite-icon {
-    transform: rotate(-90deg);
-  }
-  & .number-button-item[data-adjustment="up"] calcite-icon {
-    transform: rotate(-90deg);
-  }
-}
-
-.number-button-item.number-button-item--horizontal {
-  &[data-adjustment="down"],
-  &[data-adjustment="up"] {
-    @apply order-1
-      max-h-full
-      min-h-full
-      self-stretch;
-    & calcite-icon {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.number-button-item.number-button-item--horizontal[data-adjustment="down"] {
-  @apply border-color-input
-    border
-    border-solid;
-  border-inline-end-width: theme("borderWidth.0");
-  &:hover {
-    @apply bg-foreground-2;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-}
-
-.number-button-item.number-button-item--horizontal[data-adjustment="up"] {
-  @apply order-5;
-  &:hover {
-    @apply bg-foreground-2;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-}
-
-:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"]:hover {
-  @apply bg-foreground-2;
-  calcite-icon {
-    @apply text-color-1;
-  }
-}
-
-:host([number-button-type="vertical"]) .number-button-item[data-adjustment="up"]:hover {
-  @apply bg-foreground-2;
-  calcite-icon {
-    @apply text-color-1;
-  }
-}
-
-:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"] {
-  @apply border-t-0;
-}
-
-.number-button-item {
-  max-block-size: 50%;
-  min-block-size: 50%;
-  pointer-events: initial;
-  @apply border-color-input
-    bg-foreground-1
-    transition-default
-    m-0
-    box-border
-    flex
-    cursor-pointer
-    items-center
-    self-center
-    border
-    border-solid
-    py-0
-    px-2;
-  border-inline-start-width: theme("borderWidth.0");
-  & calcite-icon {
-    @apply transition-default pointer-events-none;
-  }
-  &:focus {
-    @apply bg-foreground-2;
-    calcite-icon {
-      @apply text-color-1;
-    }
-  }
-  &:active {
-    @apply bg-foreground-3;
-  }
-  &:disabled {
-    @apply pointer-events-none;
-  }
-}
-
-.wrapper {
-  @apply relative
-    flex
-    flex-row
-    items-center;
-}
-
-// hide the default date picker
-:input::-webkit-calendar-picker-indicator {
-  @apply hidden;
-}
-
-input[type="date"]::-webkit-input-placeholder {
-  visibility: hidden !important;
-}
-
-// textarea resize icon
-textarea::-webkit-resizer {
-  @apply absolute
-    bottom-0
-    box-border
-    py-0
-    px-1;
-  inset-inline-end: 0;
-}
-
-.resize-icon-wrapper {
-  inset-block-end: 2px;
-  inset-inline-end: 2px;
-
-  @apply bg-foreground-1
-    text-color-3
-    pointer-events-none
-    absolute
-    h-3
-    w-3;
-
-  & calcite-icon {
-    inset-block-end: theme("spacing.1");
-    inset-inline-end: theme("spacing.1");
-    transform: rotate(-45deg);
-  }
-}
-
-.calcite--rtl {
-  .resize-icon-wrapper {
-    & calcite-icon {
-      transform: rotate(45deg);
-    }
-  }
-}
-
-:host([type="color"]) input {
-  @apply p-1;
-}
-
-// file input
-:host([type="file"]) input {
-  @apply bg-foreground-1
-    border-color-input
-    cursor-pointer
-    border
-    border-dashed
-    text-center;
-}
-
-:host([type="file"][scale="s"]) input {
-  @apply py-px px-2;
-}
-
-:host([type="file"][scale="m"]) input {
-  @apply py-1 px-3;
-}
-
-:host([type="file"][scale="l"]) input {
-  @apply py-2 px-4;
-}
-
-:host(.no-bottom-border) input {
-  @apply border-b-0;
-}
-
-:host(.border-top-color-one) input {
-  @apply border-t-color-1;
-}
-
-// input needed for higher specificity of these overrides
-input {
-  &.inline-child {
-    @apply transition-default bg-transparent;
-    .editing-enabled {
-      background-color: inherit;
-    }
-  }
-
-  &.inline-child:not(.editing-enabled) {
-    @apply border-color-transparent
-      flex
-      cursor-pointer text-ellipsis;
-    padding-inline-start: 0;
-  }
-}
-
-@include form-validation-message();
-@include hidden-form-input();
-@include base-component();
+@import "assets/mixins";
+
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-input-corner-radius: defines the border radius of the component.
+ * @prop --calcite-input-text-color: defines the text color of the component.
+ * @prop --calcite-input-border-color: defines the border color of the component. This token is reassigned on `:host([status="invalid"])` and `:host(:focus)`
+ * @prop --calcite-input-background-color: defines the background color of the component. This token is reassigned on `:host([read-only])`
+ * @prop --calcite-input-button-background-color: defines the background color of a button element in the component. This token is reassigned by `--calcite-input-button-background-color-hover` on `:hover` and `--calcite-input-button-background-color-active` on `:active`
+ * @prop --calcite-input-button-background-color-hover: defines the background color of a :hover-ed button element in the component.
+ * @prop --calcite-input-button-background-color-active: defines the background color of an :active button element in the component.
+ * @prop --calcite-input-icon-color: defines the color of an icon element in the component. This token is redefined by `--calcite-input-button-icon-color-hover` when the sub-component is `:hover` or `:active`
+ * @prop --calcite-input-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component.
+ * @prop --calcite-input-prefix-text-color: defines the prefix text color in the component.
+ * @prop --calcite-input-prefix-background-color: defines the prefix background color in the component.
+ * @prop --calcite-input-suffix-text-color: defines the suffix text color in the component.
+ * @prop --calcite-input-suffix-background-color: defines the suffix background color in the component.
+ * @prop --calcite-input-placeholder-text-color: defines the color of placeholder text in the component.
+ * @prop --calcite-input-shadow: defines the box-shadow of the component.
+ *
+ */
+
+@include input();
diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts
index 4398de7e7d8..337a66d798f 100644
--- a/packages/calcite-components/src/components/input/input.stories.ts
+++ b/packages/calcite-components/src/components/input/input.stories.ts
@@ -26,17 +26,18 @@ export const simple = (): string => html`
       min="${number("min", 0)}"
       max="${number("max", 100)}"
       step="${number("step", 1)}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
+      ${text("prefix-text", "") && `prefix-text="${text("prefix-text", "")}"`}
+      ${text("suffix-text", "") && `suffix-text="${text("suffix-text", "")}"`}
       ${boolean("loading", false)}
       ${boolean("clearable", false)}
       ${boolean("disabled", false)}
-      value="${text("value", "")}"
+      ${text("value", "") && `value="${text("value", "")}"`}
       scale="${select("scale", ["s", "m", "l"], "m")}"
       status="${select("status", ["idle", "invalid", "valid"], "idle")}"
       placeholder="${text("placeholder", "Placeholder text")}"
-      validation-message="${text("validation-message", "")}"
-      validation-icon="${select("validation-icon", ["", ...iconNames], "")}"
+      ${text("validation-message", "") && `validation-message="${text("validation-message", "")}"`}
+      ${select("validation-icon", ["", ...iconNames], "") &&
+      `validation-icon="${select("validation-icon", ["", ...iconNames], "")}"`}
     ></calcite-input>
   </div>
 `;
@@ -80,14 +81,16 @@ export const textarea_TestOnly = (): string => html`
       ${boolean("loading", false)}
       ${boolean("clearable", false)}
       ${boolean("disabled", false)}
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      value="${text("value", "")}"
+      ${text("prefix-text", "") && `prefix-text="${text("prefix-text", "")}"`}
+      ${text("suffix-text", "") && `suffix-text="${text("suffix-text", "")}"`}
+      ${text("value", "") && `value="${text("value", "")}"`}
       scale="${select("scale", ["s", "m", "l"], "m")}"
       status="${select("status", ["idle", "invalid", "valid"], "idle")}"
       placeholder="${text("placeholder", "Placeholder text")}"
-      validation-message="${text("validation-message", "My great input message")}"
-      validation-icon="${select("validation-icon", ["", ...iconNames], "")}"
+      ${text("validation-message", "My great input message") &&
+      `validation-message="${text("validation-message", "My great input message")}"`}
+      ${select("validation-icon", ["", ...iconNames], "") &&
+      `validation-icon="${select("validation-icon", ["", ...iconNames], "")}"`}
     >
     </calcite-input>
   </div>
@@ -116,8 +119,8 @@ export const darkModeRTL_TestOnly = (): string => html`
         min="${number("min", 0)}"
         max="${number("max", 100)}"
         step="${number("step", 1)}"
-        prefix-text="${text("prefix-text", "")}"
-        suffix-text="${text("suffix-text", "")}"
+        ${text("prefix-text", "") && `prefix-text="${text("prefix-text", "")}"`}
+        ${text("suffix-text", "") && `suffix-text="${text("suffix-text", "")}"`}
         ${boolean("loading", false)}
         ${boolean("clearable", false)}
         ${boolean("disabled", false)}