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

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

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