@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-input/nile-input.css.js

@@ -0,0 +1,597 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Input CSS
+ */
+export const styles = css `
+  :host {
+    display: block;
+    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);
+    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
+    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
+    --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+
+  /* To Hide Safari's AutoFill icon */
+  input::-webkit-contacts-auto-fill-button {
+    visibility: hidden;
+    width: 0;
+    margin: var(--nile-spacing-none);
+    padding: var(--nile-spacing-none);
+  }
+
+  /* To Hide Safari's AutoFill icon */
+  input::-webkit-contacts-auto-fill-button {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* To Hide Safari's AutoFill icon */
+  input::-webkit-contacts-auto-fill-button {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .form-control .form-control__label {
+    display: none;
+  }
+
+  .form-control .form-control__help-text {
+    display: none;
+  }
+
+  /* Label */
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+    color: inherit;
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+  }
+
+  .form-control--has-label.form-control--medium .form-control__label {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  }
+
+  :host([required]) .form-control--has-label .form-control__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));
+  }
+
+  /* Help text */
+  .form-control--has-help-text .form-control__help-text {
+    display: block;
+    color: var(--nile-colors-dark-500);
+    margin-top: var(--nile-spacing-sm);
+  }
+
+  /* Error message */
+  .form-control__error-message {
+    display: block;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));
+    font-size: var(--nile-type-scale-2);
+    font-style: normal;
+    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+  }
+
+  .form-control--has-help-text.form-control--medium .form-control__help-text {
+    font-size: var(--nile-type-scale-1);
+  }
+
+  .form-control--has-help-text.form-control--radio-group
+    .form-control__help-text {
+    margin-top: var(--nile-spacing-xxxsmall);
+  }
+
+  .input {
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: start;
+    position: relative;
+    width: 100%;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: text;
+    transition: 150ms color, 150ms border, 150ms box-shadow,
+      150ms background-color, 150ms outline;
+    box-sizing: border-box;
+    color: var(--nile-colors-dark-900);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3);
+    font-style: normal;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+
+  /* Standard inputs */
+  .input--standard {
+    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));
+    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));
+    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));
+    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));
+  }
+
+  .input--standard:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));
+  }
+
+  .input--standard.input--error:hover:not(.input--disabled) {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));
+  }
+
+  .input--standard.input--focused:not(.input--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+  }
+  .input--standard.input--focused:not(.input--disabled) {
+  position: relative; 
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));
+  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */
+}
+
+/* Added to apply the hover effect in nxtgen  */
+.input--standard.input--focused:not(.input--disabled)::before {
+  content: "";
+  position: absolute;
+  inset: 0;  
+  pointer-events: none; 
+  border-radius: 6.5px;
+  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);
+}
+
+  .input--standard.input--focused.input--warning:not(.input--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));
+  }
+
+  .input--standard.input--focused.input--success:not(.input--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));
+  }
+  
+  .input--standard.input--focused.input--error:not(.input--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));
+  }
+
+  .input--standard.input--focused:not(.input--disabled) .input__control {
+    color: var(--nile-colors-primary-900);
+  }
+
+  .input--standard.input--disabled {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));
+    /* opacity: 0.5; */
+    cursor: not-allowed;
+  }
+
+  .input--standard.input--disabled .input__control {
+    color:  var(--nile-color-dark-blue, var(--ng-colors-text-disabled));
+  }
+
+  .input--standard.input--disabled .input__control::placeholder {
+    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));
+  }
+
+  .input--standard.input--warning {
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));
+  }
+
+  .input--standard.input--warning:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));
+  }
+
+  .input--standard.input--error {
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));
+  }
+
+  .input--standard.input--success {
+    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));
+  }
+
+  .input--standard.input--success:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));
+  }
+
+  .input--standard.input--destructive {
+    border-color: var(--nile-colors-red-400);
+  }
+
+  .input--standard.input--focused.input--destructive:not(.input--disabled) {
+    border: 1px solid var(--nile-colors-red-400);
+    box-shadow: var(--nile-input-shadow-destructive-active);
+  }
+
+  .input--destructive:active {
+    border: 1px solid var(--nile-colors-red-400);
+    box-shadow: var(--nile-input-shadow-destructive-active);
+  }
+
+  /* Filled inputs */
+  .input--filled {
+    border: none;
+    background-color: var(--nile-colors-dark-100);
+    color: hsl(240 5.3% 26.1%);
+  }
+
+  .input--filled:hover:not(.input--disabled) {
+    background-color: var(--nile-colors-dark-100);
+  }
+
+  .input--filled.input--focused:not(.input--disabled) {
+    background-color: var(--nile-colors-dark-100);
+    outline: solid 3px hsl(200.4 98% 39.4%);
+    outline-offset: 1px;
+  }
+
+  .input--filled.input--disabled {
+    background-color: var(--nile-colors-dark-100);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input__control {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    cursor: inherit;
+    -webkit-appearance: none;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
+    letter-spacing: 0.2px;
+  }
+
+  .input__control::-webkit-search-decoration,
+  .input__control::-webkit-search-cancel-button,
+  .input__control::-webkit-search-results-button,
+  .input__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input__control:-webkit-autofill {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
+    caret-color: hsl(240 5.3% 26.1%);
+  }
+
+  .input__control:-webkit-autofill:hover {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
+    caret-color: hsl(240 5.3% 26.1%);
+  }
+
+  .input__control:-webkit-autofill:focus {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
+    caret-color: hsl(240 5.3% 26.1%);
+  }
+
+  .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
+    caret-color: hsl(240 5.3% 26.1%);
+  }
+
+  .input--filled .input__control:-webkit-autofill {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
+  }
+
+  .input--filled .input__control:-webkit-autofill:hover {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
+  }
+
+  .input--filled .input__control:-webkit-autofill:focus {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
+  }
+
+  .input--filled .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
+  }
+
+  .input__control::placeholder {
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-placeholder));
+    user-select: none;
+  }
+
+  .input:hover:not(.input--disabled) .input__control {
+    color: var(--nile-colors-dark-900);
+  }
+
+  .input__control:focus {
+    outline: none;
+  }
+
+  .input__prefix,
+  .input__suffix {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+  }
+
+  .input__prefix::slotted(nile-icon) {
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .input__suffix::slotted(nile-icon) {
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .input--standard:focus {
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    border: 1px solid var(--nile-colors-primary-500);
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .input--small {
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    font-size: var(--nile-input-font-size-small);
+    height: 1.875rem;
+  }
+
+  .input--small .input__control {
+    height: calc(1.875rem);
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));
+  }
+
+  .input--small .input__clear {
+    width: calc(1em + 0.75rem * 2);
+  }
+
+  .input--small .input__password-toggle {
+    width: calc(1em + 0.75rem * 2);
+  }
+
+  .input--small .input__prefix::slotted(*) {
+    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
+  }
+
+  .input--small .input__suffix::slotted(*) {
+    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
+  }
+
+  .input--medium {
+    font-size: var(--nile-font-size-rem-large);
+    height: var(--nile-height-40px, var(--ng-height-auto));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+  }
+
+  .input--medium .input__control {
+    height: var(--nile-type-scale-3, var(--ng-height-auto));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .input--medium .input__clear {
+    width: calc(1em + 1rem * 2);
+  }
+
+  .input--medium .input__password-toggle {
+    width: calc(1em + 1rem * 2);
+  }
+
+  .input--medium .input__prefix::slotted(*) {
+    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .input--medium .input__suffix::slotted(*) {
+    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .input--large {
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    font-size: var(--nile-type-scale-6);
+    height: 3.125rem;
+  }
+
+  .input--large .input__control {
+    height: calc(3.125rem - 1px * 2);
+    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+  }
+
+  .input--large .input__clear {
+    width: calc(1em + 1.25rem * 2);
+  }
+
+  .input--large .input__password-toggle {
+    width: calc(1em + 1.25rem * 2);
+  }
+
+  .input--large .input__prefix::slotted(*) {
+    margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));
+  }
+
+  .input--large .input__suffix::slotted(*) {
+    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));
+  }
+
+  /*
+   * Pill modifier
+   */
+
+  .input--pill.input--small {
+    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));
+  }
+
+  .input--pill.input--medium {
+    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
+  }
+
+  .input--pill.input--large {
+    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
+  }
+
+  /*
+   * Clearable + Password Toggle
+   */
+
+  .input__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--nile-colors-neutral-700);
+    border: none;
+    background: none;
+    padding: var(--nile-spacing-none);
+    transition: 150ms color;
+    cursor: pointer;
+  }
+
+  .input__password-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--nile-colors-neutral-700);
+    border: none;
+    background: none;
+    padding: var(--nile-spacing-none);
+    transition: 150ms color;
+    cursor: pointer;
+  }
+
+  .input__clear:hover {
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .input__password-toggle:hover {
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .input__clear:focus,
+  .input__password-toggle:focus {
+    outline: none;
+  }
+
+  .input--empty .input__clear {
+    visibility: hidden;
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+
+  /* Hide the built-in number spinner */
+  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
+  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none;
+  }
+
+  .input--no-spin-buttons input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  :host([no-border]) .input--standard {
+    border: none;
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-outline]) .input--standard {
+    outline: var(--nile-outline-unset, var(--ng-outline-none));
+  }
+
+  :host([no-border]) .input--standard:hover:not(.input--disabled) {
+    border: none;
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
+    border: none;
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
+    border: none;
+    box-shadow: 0 0 0 0;
+  }
+
+  .input__password {
+    font-family: var(--nile-font-family-disc, var(--ng-font-family-body));
+    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));
+  }
+
+  .input__non-printable {
+    border-radius: var(--nile-radius-sm);
+    max-width: 400px;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-colors-red-500);
+    color: var(--nile-colors-red-500);
+    padding: var(--nile-spacing-10px);
+    font-size: var(--nile-type-scale-2);
+    max-height: 300px;
+    overflow-y: scroll;
+    line-height: var(--nile-type-scale-4);
+  }
+
+  .input__remove-non-printable {
+    color: var(--nile-colors-red-500);
+    margin-left: var(--nile-spacing-10px);
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-dark-900);
+    cursor: pointer;
+  }
+
+  .input__srtiked-text-container {
+    margin-top: var(--nile-spacing-xs);
+    color: var(--nile-colors-dark-900);
+    word-break: break-all;
+    line-height: var(--nile-type-scale-4);
+  }
+
+  .input__srtiked-text {
+    text-decoration: line-through;
+    text-decoration-color: var(--nile-colors-white-base);
+    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-red-500);
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-input.css.js.map

package/dist/src/nile-input/nile-input.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwkBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: var(--nile-spacing-none);\n    padding: var(--nile-spacing-none);\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color, 150ms outline;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .input--standard:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .input--standard.input--error:hover:not(.input--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  }\n  .input--standard.input--focused:not(.input--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n  border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.input--standard.input--focused:not(.input--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n  .input--standard.input--focused.input--warning:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--focused.input--success:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n  \n  .input--standard.input--focused.input--error:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color:  var(--nile-color-dark-blue, var(--ng-colors-text-disabled));\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .input--standard.input--warning:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .input--standard.input--success:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-placeholder));\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .input--medium {\n    font-size: var(--nile-font-size-rem-large);\n    height: var(--nile-height-40px, var(--ng-height-auto));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .input--medium .input__control {\n    height: var(--nile-type-scale-3, var(--ng-height-auto));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .input--large {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-6);\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__password-toggle:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-outline]) .input--standard {\n    outline: var(--nile-outline-unset, var(--ng-outline-none));\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: var(--nile-font-family-disc, var(--ng-font-family-body));\n    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm);\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-2);\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: var(--nile-spacing-10px);\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs);\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: var(--nile-type-scale-4);\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}