npm - @aquera/nile-elements - Versions diffs - 1.5.6 → 1.5.8 - Mend

@aquera/nile-elements 1.5.6 → 1.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (335) hide show

package/dist/nile-button/nile-button.css.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\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  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n  position: relative;\n  overflow: hidden; \n  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  border-color: var(--nile-colors-primary-600);\n  border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));\n}\n\n.button--standard.button--primary::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--primary::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n    cursor: not-allowed;\n    color: var(--nile-colors-white-base, var(--ng-colors-border-neutral));\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));\n    border-width:var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  \n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500,var(--ng-colors-bg-error-solid));\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700,var( --ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700,var(--ng-border-style-none));\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-dark-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--caution {\n  position: relative;\n  overflow: hidden;\n  box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n}\n\n.button--standard.button--caution::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);\n  padding: var(--ng-spacing-xxs);\n}\n\n.button--standard.button--caution::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic);\n}\n\n.button.button--disabled {\n  box-shadow: none !important;\n  border-width: var(--nile-border-width-1, var(--ng-border-width-1)) !important;\n}\n\n.button.button--disabled::after {\n  box-shadow: none !important;\n}\n\n  /* destructive */\n  .button--standard.button--destructive {\n    position: relative;\n    overflow: hidden; \n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color: var(--nile-colors-red-500);\n    border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n  }\n\n\n  .button--standard.button--destructive::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--destructive::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-dark-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n   .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n    cursor: not-allowed;\n  }  \n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--caution.button--disabled{\n    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n    border-width: var(--ng-border-width-1, 1px);\n    border-style: var(--ng-border-style-solid, solid);\n  }\n\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n  \n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  .button--standard.button--destructive.button--disabled{\n    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n    border-width: var(--ng-border-width-1, 1px);\n    border-style: var(--ng-border-style-solid, solid);\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-3);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\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  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n  position: relative;\n  overflow: hidden; \n  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  border-color: var(--nile-colors-primary-600);\n  border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));\n}\n\n.button--standard.button--primary::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--primary::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n    cursor: not-allowed;\n    color: var(--nile-colors-white-base, var(--ng-colors-border-neutral));\n    box-shadow: none;\n    border-width: var(--nile-border-width-1, var(--ng-border-width-1));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));\n    border-width:var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    border-width: var(--nile-border-width-1, var(--ng-border-width-1));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  \n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500,var(--ng-colors-bg-error-solid));\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700,var( --ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700,var(--ng-border-style-none));\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-dark-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--caution {\n  position: relative;\n  overflow: hidden;\n  box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n}\n\n.button--standard.button--caution::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);\n  padding: var(--ng-spacing-xxs);\n}\n\n.button--standard.button--caution::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic);\n}\n\n.button.button--disabled {\n  box-shadow: none !important;\n  border-width: var(--nile-border-width-1, var(--ng-border-width-1)) !important;\n}\n\n.button.button--disabled::after {\n  box-shadow: none !important;\n}\n\n  /* destructive */\n  .button--standard.button--destructive {\n    position: relative;\n    overflow: hidden; \n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color: var(--nile-colors-red-500);\n    border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n  }\n\n\n  .button--standard.button--destructive::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--destructive::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-dark-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n   .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n    cursor: not-allowed;\n  }  \n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--caution.button--disabled{\n    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n    border-width: var(--ng-border-width-1, 1px);\n    border-style: var(--ng-border-style-solid, solid);\n  }\n\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n  \n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  .button--standard.button--destructive.button--disabled{\n    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n    border-width: var(--ng-border-width-1, 1px);\n    border-style: var(--ng-border-style-solid, solid);\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color:var(--nile-colors-neutral-700);\n    background-color:var(--nile-colors-dark-200);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n    0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n    background-color:var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    box-shadow:var(--nile-box-shadow-6);\n    background-color:var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-3);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-button.css.cjs.js.map

package/dist/nile-button/nile-button.css.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"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 Button CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\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 .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n font-style: normal;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n cursor: inherit;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n box-sizing: border-box;\n height: var(--nile-height-40px, var(--ng-height-40px));\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n }\n\n .button--disabled {\n cursor: not-allowed;\n }\n\n .button--disabled {\n pointer-events: none;\n }\n\n /* Primary /\n .button--standard.button--primary {\n position: relative;\n overflow: hidden; \n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n border-color: var(--nile-colors-primary-600);\n border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));\n}\n\n.button--standard.button--primary::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: var(--ng-skeuemorphic-gradient-border);\n mask: var(--ng-mask-rim);\n mask-composite: var(--ng-mask-composite-exclude); \n padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--primary::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n cursor: not-allowed;\n color: var(--nile-colors-white-base, var(--ng-colors-border-neutral));\n box-shadow: none;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n cursor: not-allowed;\n }\n\n .button--standard.button--primary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n / Secondary /\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-border-none));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));\n border-width:var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n }\n\n / ghost /\n .button--standard.button--ghost {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost.button--disabled,\n .button--standard.button--ghost.button--disabled:hover,\n .button--standard.button--ghost.button--disabled:active {\n border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n \n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500,var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700,var( --ng-colors-bg-error-solid-hover));\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700,var(--ng-border-style-none));\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-dark-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--caution {\n position: relative;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n}\n\n.button--standard.button--caution::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: var(--ng-skeuemorphic-gradient-border);\n mask: var(--ng-mask-rim);\n mask-composite: var(--ng-mask-composite-exclude);\n padding: var(--ng-spacing-xxs);\n}\n\n.button--standard.button--caution::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--ng-shadow-xs-skeuomorphic);\n}\n\n.button.button--disabled {\n box-shadow: none !important;\n border-width: var(--nile-border-width-1, var(--ng-border-width-1)) !important;\n}\n\n.button.button--disabled::after {\n box-shadow: none !important;\n}\n\n / destructive /\n .button--standard.button--destructive {\n position: relative;\n overflow: hidden; \n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500);\n border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n }\n\n\n .button--standard.button--destructive::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: var(--ng-skeuemorphic-gradient-border);\n mask: var(--ng-mask-rim);\n mask-composite: var(--ng-mask-composite-exclude); \n padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--destructive::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n .button--standard.button--destructive:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n }\n\n .button--standard.button--destructive:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-dark-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n }\n\n .button--standard.button--destructive.button--disabled {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--destructive.button--disabled:active {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--destructive.button--disabled:hover {\n background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n cursor: not-allowed;\n } \n\n / secondary-Grey /\n .button--standard.button--secondary-grey {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n }\n\n .button--standard.button--secondary-grey.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-grey.button--disabled:hover,\n .button--standard.button--secondary-grey.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n / secondary-blue /\n .button--standard.button--secondary-blue {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n }\n\n .button--standard.button--secondary-blue.button--disabled {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-blue.button--disabled:hover,\n .button--standard.button--secondary-blue.button--disabled:active {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n / Primary Variant - Nile Icon Fill /\n .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n / Secondary Variant /\n .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n / Tertiary Variant /\n .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n / Ghost Variant /\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n / Caution Variant /\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n }\n .button--standard.button--caution.button--disabled{\n background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n border-width: var(--ng-border-width-1, 1px);\n border-style: var(--ng-border-style-solid, solid);\n }\n\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n \n\n / destructive /\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n .button--standard.button--destructive.button--disabled{\n background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n border-width: var(--ng-border-width-1, 1px);\n border-style: var(--ng-border-style-solid, solid);\n }\n\n /\n * Outline buttons\n /\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n / Default /\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Primary /\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n / Success /\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n / Neutral /\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Warning /\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n / Danger /\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n / destructive /\n .button--outline.button--destructive {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n box-shadow: 0px;\n }\n\n .button--outline.button--destructive:hover:not(.button--disabled),\n .button--outline.button--destructive.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-100);\n }\n\n .button--outline.button--destructive:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / destructive - focus-visible /\n .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / secondary-grey /\n .button--outline.button--secondary-grey {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:hover:not(.button--disabled),\n .button--outline.button--secondary-grey.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-900);\n background-color: var(--nile-colors-neutral-100);\n }\n\n .button--outline.button--secondary-grey:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n / secondary-blue /\n .button--outline.button--secondary-blue {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:hover:not(.button--disabled),\n .button--outline.button--secondary-blue.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-700);\n background-color: var(--nile-colors-blue-100);\n }\n\n .button--outline.button--secondary-blue:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /\n * Pill modifier\n /\n\n .button--pill.button--small {\n border-radius: var(--nile-radius-2xl);\n }\n\n .button--pill.button--medium {\n border-radius: var(--nile-radius-2xl);\n }\n\n /\n * Circle modifier\n /\n\n .button--circle {\n padding-left: var(--nile-spacing-none);\n padding-right: var(--nile-spacing-none);\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n / Caret modifier /\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /\n * Loading modifier\n /\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: var(--nile-type-scale-3);\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /\n * Badges\n /\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n / outline with no border */\n .button--outline.button--hideborder {\n border: 0px;\n }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1	+ {"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"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 Button CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\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 .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n font-style: normal;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n cursor: inherit;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n box-sizing: border-box;\n height: var(--nile-height-40px, var(--ng-height-40px));\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n }\n\n .button--disabled {\n cursor: not-allowed;\n }\n\n .button--disabled {\n pointer-events: none;\n }\n\n /* Primary /\n .button--standard.button--primary {\n position: relative;\n overflow: hidden; \n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n border-color: var(--nile-colors-primary-600);\n border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));\n}\n\n.button--standard.button--primary::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: var(--ng-skeuemorphic-gradient-border);\n mask: var(--ng-mask-rim);\n mask-composite: var(--ng-mask-composite-exclude); \n padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--primary::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n cursor: not-allowed;\n color: var(--nile-colors-white-base, var(--ng-colors-border-neutral));\n box-shadow: none;\n border-width: var(--nile-border-width-1, var(--ng-border-width-1));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));\n cursor: not-allowed;\n }\n\n .button--standard.button--primary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n / Secondary /\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-border-none));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));\n border-width:var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n border-width: var(--nile-border-width-1, var(--ng-border-width-1));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n }\n\n / ghost /\n .button--standard.button--ghost {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost.button--disabled,\n .button--standard.button--ghost.button--disabled:hover,\n .button--standard.button--ghost.button--disabled:active {\n border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n \n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500,var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700,var( --ng-colors-bg-error-solid-hover));\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700,var(--ng-border-style-none));\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-dark-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--caution {\n position: relative;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n}\n\n.button--standard.button--caution::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: var(--ng-skeuemorphic-gradient-border);\n mask: var(--ng-mask-rim);\n mask-composite: var(--ng-mask-composite-exclude);\n padding: var(--ng-spacing-xxs);\n}\n\n.button--standard.button--caution::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--ng-shadow-xs-skeuomorphic);\n}\n\n.button.button--disabled {\n box-shadow: none !important;\n border-width: var(--nile-border-width-1, var(--ng-border-width-1)) !important;\n}\n\n.button.button--disabled::after {\n box-shadow: none !important;\n}\n\n / destructive /\n .button--standard.button--destructive {\n position: relative;\n overflow: hidden; \n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500);\n border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n }\n\n\n .button--standard.button--destructive::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: var(--ng-skeuemorphic-gradient-border);\n mask: var(--ng-mask-rim);\n mask-composite: var(--ng-mask-composite-exclude); \n padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--destructive::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n .button--standard.button--destructive:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n }\n\n .button--standard.button--destructive:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-dark-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n }\n\n .button--standard.button--destructive.button--disabled {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--destructive.button--disabled:active {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--destructive.button--disabled:hover {\n background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n cursor: not-allowed;\n } \n\n / secondary-Grey /\n .button--standard.button--secondary-grey {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n }\n\n .button--standard.button--secondary-grey.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-grey.button--disabled:hover,\n .button--standard.button--secondary-grey.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n / secondary-blue /\n .button--standard.button--secondary-blue {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n }\n\n .button--standard.button--secondary-blue.button--disabled {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-blue.button--disabled:hover,\n .button--standard.button--secondary-blue.button--disabled:active {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n / Primary Variant - Nile Icon Fill /\n .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n / Secondary Variant /\n .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n / Tertiary Variant /\n .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n / Ghost Variant /\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n\n / Caution Variant /\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n }\n .button--standard.button--caution.button--disabled{\n background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n border-width: var(--ng-border-width-1, 1px);\n border-style: var(--ng-border-style-solid, solid);\n }\n\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n \n\n / destructive /\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n .button--standard.button--destructive.button--disabled{\n background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));\n color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));\n border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));\n border-width: var(--ng-border-width-1, 1px);\n border-style: var(--ng-border-style-solid, solid);\n }\n\n /\n * Outline buttons\n /\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n / Default /\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color:var(--nile-colors-neutral-700);\n background-color:var(--nile-colors-dark-200);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n background-color:var(--nile-colors-white-base);\n }\n\n / Primary /\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-blue-100);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n box-shadow:var(--nile-box-shadow-6);\n background-color:var(--nile-colors-white-base);\n }\n\n / Success /\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n / Neutral /\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n / Warning /\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n / Danger /\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n / destructive /\n .button--outline.button--destructive {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n box-shadow: 0px;\n }\n\n .button--outline.button--destructive:hover:not(.button--disabled),\n .button--outline.button--destructive.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-100);\n }\n\n .button--outline.button--destructive:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / destructive - focus-visible /\n .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / secondary-grey /\n .button--outline.button--secondary-grey {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:hover:not(.button--disabled),\n .button--outline.button--secondary-grey.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-900);\n background-color: var(--nile-colors-neutral-100);\n }\n\n .button--outline.button--secondary-grey:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n / secondary-blue /\n .button--outline.button--secondary-blue {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:hover:not(.button--disabled),\n .button--outline.button--secondary-blue.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-700);\n background-color: var(--nile-colors-blue-100);\n }\n\n .button--outline.button--secondary-blue:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /\n * Pill modifier\n /\n\n .button--pill.button--small {\n border-radius: var(--nile-radius-2xl);\n }\n\n .button--pill.button--medium {\n border-radius: var(--nile-radius-2xl);\n }\n\n /\n * Circle modifier\n /\n\n .button--circle {\n padding-left: var(--nile-spacing-none);\n padding-right: var(--nile-spacing-none);\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n / Caret modifier /\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /\n * Loading modifier\n /\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: var(--nile-type-scale-3);\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /\n * Badges\n /\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n / outline with no border */\n .button--outline.button--hideborder {\n border: 0px;\n }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-button/nile-button.css.esm.js CHANGED Viewed

@@ -112,6 +112,8 @@ import{css as o}from"lit";const r=o`
     cursor: not-allowed;
     color: var(--nile-colors-white-base, var(--ng-colors-border-neutral));
     box-shadow: none;
+    border-width: var(--nile-border-width-1, var(--ng-border-width-1));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));
   }
   .button--standard.button--primary.button--disabled:hover,
@@ -140,7 +142,7 @@ import{css as o}from"lit";const r=o`
   .button--standard.button--secondary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
   }
@@ -155,6 +157,8 @@ import{css as o}from"lit";const r=o`
     border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
     color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
+    border-width: var(--nile-border-width-1, var(--ng-border-width-1));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));
   }
   .button--standard.button--secondary.button--disabled:hover,
@@ -217,13 +221,12 @@ import{css as o}from"lit";const r=o`
   .button--standard.button--ghost:hover:not(.button--disabled) {
     background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
-    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));
   }
   .button--standard.button--ghost:active:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
@@ -507,9 +510,6 @@ import{css as o}from"lit";const r=o`
     ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
-  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
-  }
   /* Caution Variant */
   .button--standard.button--caution ::slotted(nile-icon:not([color])) {
@@ -576,13 +576,15 @@ import{css as o}from"lit";const r=o`
   .button--outline.button--secondary:hover:not(.button--disabled),
   .button--outline.button--secondary.button--checked:not(.button--disabled) {
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-white-base);
+    border-color:var(--nile-colors-neutral-700);
+    background-color:var(--nile-colors-dark-200);
   }
   .button--outline.button--secondary:active:not(.button--disabled) {
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+    background-color:var(--nile-colors-white-base);
   }
   /* Primary */
@@ -593,12 +595,13 @@ import{css as o}from"lit";const r=o`
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-blue-100);
   }
   .button--outline.button--primary:active:not(.button--disabled) {
     border-color: var(--nile-colors-primary-700);
-    color: var(--nile-colors-white-base);
+    box-shadow:var(--nile-box-shadow-6);
+    background-color:var(--nile-colors-white-base);
   }
   /* Success */