mtrl 0.5.2 → 0.5.3

package/src/styles/components/_textfield.scss

@@ -0,0 +1,1024 @@
+// src/styles/components/_textfield.scss
+@use "../../styles/abstract/base" as base;
+@use "../../styles/abstract/variables" as v;
+@use "../../styles/abstract/functions" as f;
+@use "../../styles/abstract/mixins" as m;
+@use "../../styles/abstract/theme" as t;
+
+// Define the component once
+$component: "#{base.$prefix}-textfield";
+
+// Autofill detection animations
+@keyframes onAutoFillStart {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes onAutoFillCancel {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// ===== BASE STYLES =====
+.#{$component} {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 210px;
+  // align-self: flex-start; // Prevents growing to fill the container's height
+  flex: 0 0 auto; // Don't grow or shrink; keep natural size
+  // Label
+  &-label {
+    @include m.typography("body-large");
+    user-select: none;
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: left top;
+    pointer-events: none;
+    border-radius: 2px;
+    color: t.color("on-surface-variant");
+    transition: transform v.motion("duration-short4")
+        v.motion("easing-emphasized"),
+      color v.motion("duration-short2") v.motion("easing-standard"),
+      left v.motion("duration-short4") v.motion("easing-emphasized");
+  }
+
+  // Input element
+  &-input {
+    @include m.typography("body-large");
+    @include m.shape("extra-small");
+    padding: 13px 16px;
+    width: 100%;
+    height: 56px;
+    color: t.color("on-surface");
+    border: 0;
+    appearance: none;
+    outline: none;
+
+    // Animation to detect autofill
+    animation-name: onAutoFillCancel;
+    animation-duration: 10ms;
+
+    // Transition to help detect autofill changes
+    transition: background-color 0s ease-out 50000000s;
+
+    &::placeholder {
+      color: transparent;
+    }
+
+    // Autofill styles
+    &:-webkit-autofill {
+      animation-name: onAutoFillStart;
+      animation-duration: 10ms;
+      -webkit-text-fill-color: t.color("on-surface");
+      transition: background-color 5000s ease-in-out 0s; // Long transition to keep the background
+
+      & ~ .#{$component}-label {
+        transform: translateY(-95%) scale(0.75);
+        background-color: t.color("surface");
+      }
+    }
+
+    // Firefox autofill
+    &:autofill {
+      color: t.color("on-surface");
+
+      & ~ .#{$component}-label {
+        transform: translateY(-95%) scale(0.75);
+        background-color: t.color("surface");
+      }
+    }
+
+    // Non-empty input should also float the label
+    &:not(:placeholder-shown) {
+      & ~ .#{$component}-label {
+        transform: translateY(-95%) scale(0.75);
+      }
+    }
+  }
+
+  // Prefix text
+  &-prefix {
+    @include m.typography("body-large");
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: t.color("on-surface");
+    pointer-events: none;
+    z-index: 2; // Increased to ensure it stays above input
+    white-space: nowrap; // Prevent text wrapping
+    max-width: 40%; // Prevent extreme overflow
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: top v.motion("duration-short4") v.motion("easing-emphasized"); // Add transition for top position
+  }
+
+  // Suffix text
+  &-suffix {
+    @include m.typography("body-large");
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: t.color("on-surface");
+    pointer-events: none;
+    z-index: 2; // Increased to ensure it stays above input
+    white-space: nowrap; // Prevent text wrapping
+    max-width: 40%; // Prevent extreme overflow
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: top v.motion("duration-short4") v.motion("easing-emphasized"); // Add transition for top position
+  }
+
+  // Leading icon
+  &-leading-icon {
+    opacity: 0.85;
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    pointer-events: none;
+    color: t.color("on-surface-variant");
+    z-index: 1;
+    transition: top v.motion("duration-short4") v.motion("easing-emphasized"); // Add transition for top position
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  // Trailing icon
+  &-trailing-icon {
+    opacity: 0.85;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: t.color("on-surface-variant");
+    z-index: 1;
+    cursor: pointer;
+    transition: top v.motion("duration-short4") v.motion("easing-emphasized"); // Add transition for top position
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  // Adjustments when prefix/suffix are present - base case styling
+  // JavaScript will handle dynamic sizing, these are fallbacks
+  &--with-prefix {
+    .#{$component}-label {
+      // Default value - will be overridden by JS for precise positioning
+      left: 48px;
+    }
+
+    .#{$component}-input {
+      // Default value - will be overridden by JS for precise padding
+      padding-left: 48px;
+    }
+  }
+
+  &--with-suffix {
+    .#{$component}-input {
+      // Default value - will be overridden by JS for precise padding
+      padding-right: 48px;
+    }
+  }
+
+  // Adjustments when icons are present
+  &--with-leading-icon {
+    .#{$component}-label {
+      left: 44px;
+    }
+
+    .#{$component}-input {
+      padding-left: 44px;
+    }
+
+    // If there's also a prefix, adjust positions
+    &.#{$component}--with-prefix {
+      .#{$component}-prefix {
+        left: 44px;
+      }
+
+      .#{$component}-label {
+        // Default value - will be overridden by JS for precise positioning
+        left: 76px;
+      }
+
+      .#{$component}-input {
+        // Default value - will be overridden by JS for precise padding
+        padding-left: 76px;
+      }
+    }
+  }
+
+  &--with-trailing-icon {
+    .#{$component}-input {
+      padding-right: 44px;
+    }
+
+    // If there's also a suffix, adjust positions
+    &.#{$component}--with-suffix {
+      .#{$component}-suffix {
+        right: 44px;
+      }
+
+      .#{$component}-input {
+        // Default value - will be overridden by JS for precise padding
+        padding-right: 76px;
+      }
+    }
+  }
+
+  // Error state
+  &--error {
+    border-color: t.color("error");
+
+    .#{$component}-label {
+      color: t.color("error");
+    }
+
+    .#{$component}-leading-icon,
+    .#{$component}-trailing-icon,
+    .#{$component}-prefix,
+    .#{$component}-suffix {
+      color: t.color("error");
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    .#{$component}-input {
+      opacity: 0.38;
+      border-color: t.color("on-surface");
+      background-color: t.alpha("on-surface", 0.04);
+      pointer-events: none;
+    }
+
+    .#{$component}-label {
+      color: t.color("on-surface");
+      opacity: 0.38;
+    }
+
+    .#{$component}-leading-icon,
+    .#{$component}-trailing-icon,
+    .#{$component}-prefix,
+    .#{$component}-suffix {
+      color: t.color("on-surface");
+      opacity: 0.38;
+    }
+  }
+
+  // Disabled state - legacy support for direct input disabled
+  &-input:disabled {
+    opacity: 0.38;
+    border-color: t.color("on-surface");
+    background-color: t.alpha("on-surface", 0.04);
+    pointer-events: none;
+
+    & ~ .#{$component}-label,
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon,
+    & ~ .#{$component}-prefix,
+    & ~ .#{$component}-suffix {
+      color: t.color("on-surface");
+      opacity: 0.38;
+    }
+  }
+
+  // Helper text / Supporting text
+  &-helper {
+    @include m.typography("body-small");
+    position: absolute;
+    bottom: -18px;
+    left: 16px;
+    margin-top: 4px;
+    color: t.color("on-surface-variant");
+
+    &--error {
+      color: t.color("error");
+    }
+  }
+
+  // Required indicator
+  &-required {
+    color: t.color("error");
+    margin-left: 4px;
+  }
+
+  // Accessibility
+  @include m.reduced-motion {
+    &-label {
+      transition: none;
+    }
+
+    &-prefix,
+    &-suffix,
+    &-leading-icon,
+    &-trailing-icon {
+      transition: none;
+    }
+  }
+
+  // RTL support
+  @include m.rtl {
+    &-label {
+      left: auto;
+      right: 16px;
+      transform-origin: right top;
+    }
+
+    &-required {
+      margin-left: 0;
+      margin-right: 4px;
+    }
+
+    &-prefix {
+      left: auto;
+      right: 16px;
+    }
+
+    &-suffix {
+      right: auto;
+      left: 16px;
+    }
+
+    &-leading-icon {
+      left: auto;
+      right: 12px;
+    }
+
+    &-trailing-icon {
+      right: auto;
+      left: 12px;
+    }
+
+    &--with-prefix {
+      .#{$component}-label {
+        left: auto;
+        // Default value - will be overridden by JS for precise positioning
+        right: 48px;
+      }
+
+      .#{$component}-input {
+        padding-left: 16px;
+        // Default value - will be overridden by JS for precise padding
+        padding-right: 48px;
+      }
+    }
+
+    &--with-suffix {
+      .#{$component}-input {
+        padding-right: 16px;
+        // Default value - will be overridden by JS for precise padding
+        padding-left: 48px;
+      }
+    }
+
+    &--with-leading-icon {
+      .#{$component}-label {
+        left: auto;
+        right: 44px;
+      }
+
+      .#{$component}-input {
+        padding-left: 16px;
+        padding-right: 44px;
+      }
+
+      &.#{$component}--with-prefix {
+        .#{$component}-prefix {
+          left: auto;
+          right: 44px;
+        }
+
+        .#{$component}-label {
+          left: auto;
+          // Default value - will be overridden by JS for precise positioning
+          right: 76px;
+        }
+
+        .#{$component}-input {
+          padding-left: 16px;
+          // Default value - will be overridden by JS for precise padding
+          padding-right: 76px;
+        }
+      }
+    }
+
+    &--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 16px;
+        padding-left: 44px;
+      }
+
+      &.#{$component}--with-suffix {
+        .#{$component}-suffix {
+          right: auto;
+          left: 44px;
+        }
+
+        .#{$component}-input {
+          padding-right: 16px;
+          // Default value - will be overridden by JS for precise padding
+          padding-left: 76px;
+        }
+      }
+    }
+  }
+
+  // ===== FILLED VARIANT =====
+  &--filled {
+    .#{$component}-input {
+      background-color: t.color("surface-container-highest");
+      padding: 20px 16px 7px;
+      border-bottom: 1px solid t.color("outline");
+      border-radius: f.get-shape("extra-small") f.get-shape("extra-small") 0 0;
+      @include m.motion-transition(background-color, border-color);
+
+      // Autofill styles for filled variant
+      &:-webkit-autofill {
+        border-radius: f.get-shape("extra-small") f.get-shape("extra-small") 0 0;
+
+        & ~ .#{$component}-label {
+          transform: translateY(-95%) scale(0.75);
+          color: t.color("on-surface-variant");
+        }
+      }
+
+      &:autofill {
+        & ~ .#{$component}-label {
+          transform: translateY(-95%) scale(0.75);
+          color: t.color("on-surface-variant");
+        }
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      opacity: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: t.color("primary");
+      border-radius: 0;
+      pointer-events: none;
+      transition: 0.2s opacity ease;
+    }
+
+    // Populated field (not empty) or focused field label position
+    &:not(.#{$component}--empty) .#{$component}-label,
+    &.#{$component}--focused .#{$component}-label {
+      transform: translateY(-95%) scale(0.75);
+      // Don't specify left position here - let JS handle it
+    }
+
+    // CSS-only fallback for when input has value (works without JS)
+    .#{$component}-input:not(:placeholder-shown) ~ .#{$component}-label {
+      transform: translateY(-95%) scale(0.75);
+    }
+
+    // Position adjustments for prefix/suffix when in filled focused/populated state
+    &.mtrl-textfield--with-prefix,
+    &.mtrl-textfield--with-suffix {
+      &:not(.#{$component}--empty),
+      &.#{$component}--focused {
+        .#{$component}-prefix,
+        .#{$component}-suffix {
+          top: 34px; // Align with input text when focused or populated
+        }
+      }
+    }
+    // Focus state
+    &.#{$component}--focused {
+      .#{$component}-label {
+        color: t.color("primary");
+      }
+
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    // Error state
+    &.#{$component}--error {
+      &::before {
+        opacity: 1;
+        background-color: t.color("error");
+      }
+
+      .#{$component}-label {
+        color: t.color("error");
+      }
+    }
+
+    // Disabled state
+    &.#{$component}--disabled {
+      border-bottom-color: t.alpha("on-surface", 0.38);
+      pointer-events: none;
+
+      .#{$component}-input {
+        background-color: t.alpha("on-surface", 0.04);
+      }
+    }
+
+    // Prefix/suffix adjustments for filled variant
+    &.#{$component}--with-prefix {
+      .#{$component}-prefix {
+        top: 28px; // Align with input text in filled variant - default state
+      }
+    }
+
+    &.#{$component}--with-suffix {
+      .#{$component}-suffix {
+        top: 28px; // Align with input text in filled variant - default state
+      }
+    }
+
+    // Icon adjustments for filled variant
+    &.#{$component}--with-leading-icon {
+      .#{$component}-input {
+        padding: 20px 16px 7px 44px;
+      }
+
+      .#{$component}-label {
+        left: 44px;
+      }
+
+      .#{$component}-leading-icon {
+        top: 28px;
+      }
+    }
+
+    // Populated field (not empty) or focused field label position
+    &:not(.#{$component}--empty) .#{$component}-label,
+    &.#{$component}--focused .#{$component}-label {
+      // Important change: For outlined variant, when focused/populated
+      // we want to reset the left position back to default (or to JS calculated equivalent)
+      // to handle the label moving up above the field
+      // The JS will handle special positioning depending on if it's prefixed
+      left: 16px;
+    }
+
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
+
+      .#{$component}-trailing-icon {
+        top: 28px;
+      }
+    }
+
+    // RTL support
+    @include m.rtl {
+      .#{$component}-label {
+        left: auto;
+        right: 16px;
+      }
+
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding: 20px 44px 7px 16px;
+        }
+
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+      }
+
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
+    }
+  }
+
+  // ===== OUTLINED VARIANT =====
+  &--outlined {
+    background-color: inherit;
+    border-radius: f.get-shape("extra-small");
+    @include m.motion-transition(border-color);
+
+    .#{$component}-input {
+      background-color: transparent;
+      padding: 12px 15px 13px;
+      border: 1px solid t.color("outline");
+      @include m.motion-transition(padding);
+
+      // Autofill styles for outlined variant
+      &:-webkit-autofill {
+        border-radius: f.get-shape("extra-small");
+
+        & ~ .#{$component}-label {
+          background-color: t.color("surface");
+          transform: translateY(-145%) scale(0.75);
+        }
+      }
+
+      &:autofill {
+        & ~ .#{$component}-label {
+          background-color: t.color("surface");
+          transform: translateY(-145%) scale(0.75);
+        }
+      }
+    }
+
+    .#{$component}-label {
+      background-color: inherit;
+      padding: 0 4px;
+      left: 14px;
+      top: 50%;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      border: 1.5px solid t.color("primary");
+      border-radius: f.get-shape("extra-small");
+      pointer-events: none;
+      transition: 0.1s opacity ease;
+    }
+
+    // Populated field (not empty) or focused field label position
+    &:not(.#{$component}--empty) .#{$component}-label,
+    &.#{$component}--focused .#{$component}-label {
+      padding: 0 4px;
+      transform: translateY(-147%) scale(0.75);
+      // Important change: For outlined variant, when focused/populated
+      // we want to reset the left position back to default (or to JS calculated equivalent)
+      // to handle the label moving up above the field
+      // The JS will handle special positioning depending on if it's prefixed
+      left: 14px;
+    }
+
+    // CSS-only fallback for when input has value (works without JS)
+    .#{$component}-input:not(:placeholder-shown) ~ .#{$component}-label {
+      padding: 0 4px;
+      transform: translateY(-147%) scale(0.75);
+      left: 14px;
+      background-color: t.color("surface");
+    }
+
+    // Focus state
+    &.#{$component}--focused {
+      &::before {
+        opacity: 1;
+        border-width: 2px;
+      }
+      // &:hover {
+      //   &::before {
+
+      //   }
+      // }
+
+      .#{$component}-label {
+        color: t.color("primary");
+      }
+    }
+
+    // Error state
+    &.#{$component}--error {
+      &::before {
+        opacity: 1;
+        border: 2px solid t.color("error");
+      }
+
+      .#{$component}-label {
+        color: t.color("error");
+      }
+    }
+
+    // Disabled state
+    &.#{$component}--disabled {
+      pointer-events: none;
+      &::before {
+        opacity: 1;
+        border: 1px solid t.alpha("on-surface", 0.38);
+      }
+    }
+
+    // Prefix/suffix vertical alignment for outlined variant
+    &.#{$component}--with-prefix {
+      .#{$component}-prefix {
+        top: 50%; // Centered vertically in outlined variant
+      }
+    }
+
+    &.#{$component}--with-suffix {
+      .#{$component}-suffix {
+        top: 50%; // Centered vertically in outlined variant
+      }
+    }
+
+    // Icon adjustments for outlined variant
+    &.#{$component}--with-leading-icon {
+      .#{$component}-input {
+        padding-left: 44px;
+      }
+
+      .#{$component}-label {
+        left: 44px;
+      }
+
+      // Important change: For outlined variant, when focused/populated
+      // we still reset to 12px position (default)
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        left: 14px;
+      }
+    }
+
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
+    }
+
+    // RTL support
+    @include m.rtl {
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        left: auto;
+        right: 12px;
+      }
+
+      &.#{$component}--focused .#{$component}-label {
+        right: 12px;
+      }
+
+      &.#{$component}--error .#{$component}-label {
+        right: 12px;
+      }
+
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding-left: 16px;
+          padding-right: 44px;
+        }
+
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+
+        &:not(.#{$component}--empty) .#{$component}-label,
+        &.#{$component}--focused .#{$component}-label {
+          // Reset to default value for focused state
+          right: 12px;
+          left: auto;
+        }
+      }
+
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
+    }
+  }
+
+  // Multiline styles
+  &--multiline {
+    .#{$component}-input {
+      min-height: 100px;
+      height: auto;
+      resize: vertical;
+      padding-top: 12px;
+    }
+
+    .#{$component}-prefix,
+    .#{$component}-suffix {
+      top: 28px;
+    }
+
+    .#{$component}-label {
+      top: 24px;
+    }
+  }
+
+  // Support for multiline inputs
+  &-input[type="multiline"] {
+    min-height: 100px;
+    height: auto; // Allow height to adjust based on content
+    max-height: none; // Remove max-height constraint from regular inputs
+    flex-shrink: 1; // Allow some shrinking for multiline
+
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon,
+    & ~ .#{$component}-prefix,
+    & ~ .#{$component}-suffix {
+      top: 20px;
+      transform: none;
+    }
+  }
+
+  // ===== DENSITY VARIANTS =====
+  // Compact density (40px height)
+  &--density-compact {
+    .#{$component}-input {
+      height: 40px;
+      padding: 8px 16px;
+      @include m.typography("body-medium"); // Slightly smaller text
+    }
+
+    // Adjust label position for compact
+    .#{$component}-label {
+      @include m.typography("body-medium");
+    }
+
+    // Adjust icon positions for compact height
+    .#{$component}-leading-icon,
+    .#{$component}-trailing-icon {
+      width: 20px;
+      height: 20px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    // Adjust prefix/suffix position for compact
+    .#{$component}-prefix,
+    .#{$component}-suffix {
+      @include m.typography("body-medium");
+    }
+
+    // Filled variant with compact density
+    &.#{$component}--filled {
+      .#{$component}-input {
+        padding: 12px 16px 4px; // Adjusted for filled variant
+      }
+
+      // Populated/focused label position
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-90%) scale(0.75); // Adjusted for compact height
+      }
+
+      // Adjust prefix/suffix position when focused/populated
+      &.mtrl-textfield--with-prefix,
+      &.mtrl-textfield--with-suffix {
+        &:not(.#{$component}--empty),
+        &.#{$component}--focused {
+          .#{$component}-prefix,
+          .#{$component}-suffix {
+            top: 22px; // Adjusted for compact filled variant
+          }
+        }
+      }
+
+      // Adjust icons for filled compact
+      .#{$component}-leading-icon,
+      .#{$component}-trailing-icon {
+        top: 20px; // Adjusted for compact filled
+      }
+    }
+
+    // Outlined variant with compact density
+    &.#{$component}--outlined {
+      .#{$component}-input {
+        padding: 8px 15px 9px;
+      }
+
+      // Focused/populated position
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-130%) scale(0.75); // Same as default, scale is important
+      }
+    }
+
+    // Multiline with compact density
+    &.#{$component}--multiline {
+      .#{$component}-input {
+        min-height: 40px;
+        padding: 8px 16px;
+      }
+    }
+
+    // Adjust element positions for compact with icons
+    &.#{$component}--with-leading-icon {
+      .#{$component}-label {
+        left: 40px; // Reduced from 44px
+      }
+
+      .#{$component}-input {
+        padding-left: 40px;
+      }
+
+      &.#{$component}--with-prefix {
+        .#{$component}-prefix {
+          left: 40px;
+        }
+
+        .#{$component}-label {
+          left: 68px; // Adjusted for compact
+        }
+
+        .#{$component}-input {
+          padding-left: 68px;
+        }
+      }
+    }
+
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 40px;
+      }
+
+      &.#{$component}--with-suffix {
+        .#{$component}-suffix {
+          right: 40px;
+        }
+
+        .#{$component}-input {
+          padding-right: 68px;
+        }
+      }
+    }
+
+    // RTL adjustments for compact density
+    @include m.rtl {
+      &.#{$component}--with-leading-icon {
+        .#{$component}-label {
+          left: auto;
+          right: 40px;
+        }
+
+        .#{$component}-input {
+          padding-left: 16px;
+          padding-right: 40px;
+        }
+
+        &.#{$component}--with-prefix {
+          .#{$component}-prefix {
+            left: auto;
+            right: 40px;
+          }
+
+          .#{$component}-label {
+            left: auto;
+            right: 68px;
+          }
+
+          .#{$component}-input {
+            padding-left: 16px;
+            padding-right: 68px;
+          }
+        }
+      }
+
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 40px;
+        }
+
+        &.#{$component}--with-suffix {
+          .#{$component}-suffix {
+            right: auto;
+            left: 40px;
+          }
+
+          .#{$component}-input {
+            padding-right: 16px;
+            padding-left: 68px;
+          }
+        }
+      }
+    }
+  }
+}