@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/Input/Input/Input.module.scss

@@ -4,312 +4,310 @@
 @import '../../../styles/utils/form-variables';
 @import '../../../styles/utils/forms';
 
-@layer kz-components {
-  $input-height: 48px;
-  $input-base-padding-horizontal: $spacing-sm;
-  $input-icon-size: 1.25rem; // 20px
-  $input-placeholder-opacity: 0.5;
-  $input-disabled-background: $color-gray-300;
-  $input-disabled-opacity: 0.3;
-  $input-disabled-border-alpha: 50%;
-  $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75));
-
-  .wrapper {
-    position: relative;
-
-    &.hasStatus {
-      z-index: 1;
-    }
+$input-height: 48px;
+$input-base-padding-horizontal: $spacing-sm;
+$input-icon-size: 1.25rem; // 20px
+$input-placeholder-opacity: 0.5;
+$input-disabled-background: $color-gray-300;
+$input-disabled-opacity: 0.3;
+$input-disabled-border-alpha: 50%;
+$input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75));
+
+.wrapper {
+  position: relative;
+
+  &.hasStatus {
+    z-index: 1;
+  }
 
-    &:hover {
-      z-index: 2;
-    }
+  &:hover {
+    z-index: 2;
+  }
 
-    &:focus-within {
-      z-index: 3;
-    }
+  &:focus-within {
+    z-index: 3;
+  }
+}
+
+.input {
+  @include form-input-reset;
+
+  background-color: transparent;
+  background-clip: padding-box;
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $border-solid-border-radius;
+  display: block;
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 0 $input-base-padding-horizontal;
+  height: $input-height;
+  width: 100%;
+  margin-bottom: 2px;
+
+  @include form-input-placeholder {
+    opacity: 100%;
   }
 
-  .input {
-    @include form-input-reset;
-
-    background-color: transparent;
-    background-clip: padding-box;
-    border: $border-solid-border-width $border-solid-border-style transparent;
-    border-radius: $border-solid-border-radius;
-    display: block;
-    font-size: 1rem;
-    line-height: 1.5;
-    padding: 0 $input-base-padding-horizontal;
-    height: $input-height;
-    width: 100%;
-    margin-bottom: 2px;
+  &:focus:not([disabled]),
+  &:hover:focus:not([disabled]) {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
 
     @include form-input-placeholder {
-      opacity: 100%;
+      opacity: 0%;
     }
+  }
 
-    &:focus:not([disabled]),
-    &:hover:focus:not([disabled]) {
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
-      outline-offset: 1px;
-
-      @include form-input-placeholder {
-        opacity: 0%;
-      }
+  &.disabled {
+    &:not(.reversed) {
+      background: $input-disabled-background;
     }
 
-    &.disabled {
-      &:not(.reversed) {
-        background: $input-disabled-background;
-      }
-
-      @include form-input-placeholder {
-        color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-      }
+    @include form-input-placeholder {
+      color: rgba($color-purple-800-rgb, $input-disabled-opacity);
     }
   }
+}
 
-  /* stylelint-disable no-descending-specificity */
-  ///////////////////////////////////////////////////
-  // ICON ADORNMENT STYLES
-  ///////////////////////////////////////////////////
+/* stylelint-disable no-descending-specificity */
+///////////////////////////////////////////////////
+// ICON ADORNMENT STYLES
+///////////////////////////////////////////////////
+
+@mixin vertically-center-icon {
+  position: absolute;
+  height: $input-icon-size;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
 
-  @mixin vertically-center-icon {
-    position: absolute;
-    height: $input-icon-size;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
+.withStartIconAdornment {
+  .startIconAdornment {
+    @include vertically-center-icon;
+
+    inset-inline: $spacing-sm auto;
   }
 
-  .withStartIconAdornment {
+  &.withDisabled {
     .startIconAdornment {
-      @include vertically-center-icon;
-
-      inset-inline: $spacing-sm auto;
+      opacity: $input-disabled-opacity;
     }
+  }
 
-    &.withDisabled {
-      .startIconAdornment {
-        opacity: $input-disabled-opacity;
-      }
-    }
+  .input {
+    padding-inline: $input-with-icon-padding $input-base-padding-horizontal;
+  }
+}
 
-    .input {
-      padding-inline: $input-with-icon-padding $input-base-padding-horizontal;
-    }
+.withEndIconAdornment {
+  .endIconAdornment {
+    @include vertically-center-icon;
+
+    inset-inline: auto $spacing-sm;
   }
 
-  .withEndIconAdornment {
+  &.withDisabled {
     .endIconAdornment {
-      @include vertically-center-icon;
-
-      inset-inline: auto $spacing-sm;
+      opacity: $input-disabled-opacity;
     }
+  }
 
-    &.withDisabled {
-      .endIconAdornment {
-        opacity: $input-disabled-opacity;
-      }
-    }
+  .input {
+    padding-inline: $input-base-padding-horizontal $input-with-icon-padding;
+  }
+}
 
-    .input {
-      padding-inline: $input-base-padding-horizontal $input-with-icon-padding;
-    }
+.withStartIconAdornment.withEndIconAdornment {
+  .input {
+    padding-inline: $input-with-icon-padding $input-with-icon-padding;
   }
+}
 
-  .withStartIconAdornment.withEndIconAdornment {
-    .input {
-      padding-inline: $input-with-icon-padding $input-with-icon-padding;
-    }
+// Default theme
+/* stylelint-disable-next-line no-duplicate-selectors */
+.withStartIconAdornment {
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  .startIconAdornment {
+    color: $color-purple-800;
+    opacity: 50%;
   }
 
-  // Default theme
   /* stylelint-disable-next-line no-duplicate-selectors */
-  .withStartIconAdornment {
+  &.withDisabled {
     /* stylelint-disable-next-line no-duplicate-selectors */
     .startIconAdornment {
-      color: $color-purple-800;
-      opacity: 50%;
+      opacity: 30%;
     }
+  }
 
-    /* stylelint-disable-next-line no-duplicate-selectors */
-    &.withDisabled {
-      /* stylelint-disable-next-line no-duplicate-selectors */
-      .startIconAdornment {
-        opacity: 30%;
-      }
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &:hover:not(.withDisabled),
+  &:focus-within:not(.withDisabled) {
+    .startIconAdornment {
+      opacity: 70%;
     }
+  }
+}
 
-    /* stylelint-disable-next-line no-duplicate-selectors */
-    &:hover:not(.withDisabled),
-    &:focus-within:not(.withDisabled) {
-      .startIconAdornment {
-        opacity: 70%;
-      }
+// Reversed
+.withStartIconAdornment.withReversed {
+  .startIconAdornment {
+    color: $color-white;
+    opacity: 100%;
+  }
+
+  &.withDisabled {
+    .startIconAdornment {
+      opacity: 30%;
     }
   }
 
-  // Reversed
-  .withStartIconAdornment.withReversed {
+  &:hover:not(.withDisabled),
+  &:focus-within:not(.withDisabled) {
     .startIconAdornment {
-      color: $color-white;
       opacity: 100%;
     }
+  }
+}
 
-    &.withDisabled {
-      .startIconAdornment {
-        opacity: 30%;
-      }
-    }
+.withEndIconAdornment.withReversed {
+  .endIconAdornment {
+    color: $color-white;
+    opacity: 100%;
+  }
 
-    &:hover:not(.withDisabled),
-    &:focus-within:not(.withDisabled) {
-      .startIconAdornment {
-        opacity: 100%;
-      }
+  &.withDisabled {
+    .endIconAdornment {
+      opacity: 30%;
     }
   }
 
-  .withEndIconAdornment.withReversed {
+  &:hover:not(.withDisabled),
+  &:focus-within:not(.withDisabled) {
     .endIconAdornment {
-      color: $color-white;
       opacity: 100%;
     }
+  }
+}
 
-    &.withDisabled {
-      .endIconAdornment {
-        opacity: 30%;
-      }
-    }
+///////////////////////////////////////////////////
+// THEMES
+///////////////////////////////////////////////////
 
-    &:hover:not(.withDisabled),
-    &:focus-within:not(.withDisabled) {
-      .endIconAdornment {
-        opacity: 100%;
-      }
-    }
+// Default
+.input.default {
+  background-color: $color-white;
+  color: $color-purple-800;
+  display: flex;
+  align-items: center;
+
+  @include form-input-placeholder {
+    color: $color-purple-800;
+    opacity: $input-placeholder-opacity;
+  }
+
+  @include form-input-focus-state {
+    background-color: $color-gray-200;
   }
 
-  ///////////////////////////////////////////////////
-  // THEMES
-  ///////////////////////////////////////////////////
+  &:focus + .focusRing {
+    border-color: $color-blue-500;
+  }
 
-  // Default
-  .input.default {
+  &.disabled {
     background-color: $color-white;
-    color: $color-purple-800;
-    display: flex;
-    align-items: center;
+    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+    color: rgba($color-purple-800-rgb, $input-disabled-opacity);
 
     @include form-input-placeholder {
-      color: $color-purple-800;
-      opacity: $input-placeholder-opacity;
-    }
-
-    @include form-input-focus-state {
-      background-color: $color-gray-200;
+      opacity: $input-disabled-opacity;
     }
+  }
 
-    &:focus + .focusRing {
-      border-color: $color-blue-500;
-    }
+  &:not(.error, .caution) {
+    border-color: $color-gray-500;
 
-    &.disabled {
-      background-color: $color-white;
+    &:disabled {
       border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-      color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-
-      @include form-input-placeholder {
-        opacity: $input-disabled-opacity;
-      }
     }
 
-    &:not(.error, .caution) {
-      border-color: $color-gray-500;
-
-      &:disabled {
-        border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-      }
-
-      @include form-input-focus-state {
-        border-color: $color-gray-600;
-      }
+    @include form-input-focus-state {
+      border-color: $color-gray-600;
     }
+  }
 
-    &.error {
-      border-color: $color-red-500;
+  &.error {
+    border-color: $color-red-500;
 
-      &.disabled {
-        border-color: rgba($color-red-500-rgb, $input-disabled-opacity);
-      }
+    &.disabled {
+      border-color: rgba($color-red-500-rgb, $input-disabled-opacity);
     }
+  }
 
-    &.caution {
-      border-color: $color-yellow-600;
+  &.caution {
+    border-color: $color-yellow-600;
 
-      &.disabled {
-        border-color: rgba($color-yellow-600-rgb, $input-disabled-opacity);
-      }
+    &.disabled {
+      border-color: rgba($color-yellow-600-rgb, $input-disabled-opacity);
     }
   }
+}
 
-  // Reversed (Dark Backgrounds)
-  .input.reversed {
-    background: transparent;
-    color: $color-white;
+// Reversed (Dark Backgrounds)
+.input.reversed {
+  background: transparent;
+  color: $color-white;
 
-    @include form-input-placeholder {
-      color: $color-white;
-      opacity: $input-placeholder-opacity;
-    }
+  @include form-input-placeholder {
+    color: $color-white;
+    opacity: $input-placeholder-opacity;
+  }
 
-    @include form-input-focus-state {
-      background: rgba($color-white-rgb, 0.1);
-    }
+  @include form-input-focus-state {
+    background: rgba($color-white-rgb, 0.1);
+  }
 
-    &:focus {
-      outline-color: var(--color-blue-300);
-    }
+  &:focus {
+    outline-color: var(--color-blue-300);
+  }
 
-    &:not(.error, .caution) {
-      border-color: rgba($color-white-rgb, 0.65);
+  &:not(.error, .caution) {
+    border-color: rgba($color-white-rgb, 0.65);
 
-      &:disabled {
-        border-color: rgba($color-white-rgb, $input-disabled-opacity);
-      }
+    &:disabled {
+      border-color: rgba($color-white-rgb, $input-disabled-opacity);
+    }
 
-      @include form-input-focus-state {
-        border-color: $color-white;
-      }
+    @include form-input-focus-state {
+      border-color: $color-white;
     }
+  }
 
-    &.disabled {
-      background: transparent;
-      color: rgba($color-white-rgb, $input-disabled-opacity);
+  &.disabled {
+    background: transparent;
+    color: rgba($color-white-rgb, $input-disabled-opacity);
 
-      @include form-input-placeholder {
-        opacity: $input-disabled-opacity;
-      }
+    @include form-input-placeholder {
+      opacity: $input-disabled-opacity;
     }
+  }
 
-    &.error {
-      border-color: $color-red-300;
+  &.error {
+    border-color: $color-red-300;
 
-      &.disabled {
-        border-color: rgba($color-red-300-rgb, $input-disabled-opacity);
-      }
+    &.disabled {
+      border-color: rgba($color-red-300-rgb, $input-disabled-opacity);
     }
+  }
 
-    &.caution {
-      border-color: $color-yellow-400;
+  &.caution {
+    border-color: $color-yellow-400;
 
-      &.disabled {
-        border-color: rgba($color-yellow-400-rgb, $input-disabled-opacity);
-      }
+    &.disabled {
+      border-color: rgba($color-yellow-400-rgb, $input-disabled-opacity);
     }
   }
-  /* stylelint-enable no-descending-specificity */
 }
+/* stylelint-enable no-descending-specificity */