/**
 * 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 {
    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-primary-500, var(--ng-colors-bg-disabled));
    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));
    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,
  .button--standard.button--primary.button--disabled:active {
    background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));
    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));
    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-500, 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-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,
  .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-neutral-700, 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-400, 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));
    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-colors-neutral-700, 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,var(--ng-colors-bg-error-solid));
    border-color: var(--nile-colors-red-500);
    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
    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--caution: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);
    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
  }



  .button--standard.button--caution:active:not(.button--disabled) {
    background-color: var(--nile-colors-red-700);
    border-color: var(--nile-colors-red-700,var(--ng-border-style-none));
    color: var(--nile-colors-white-base);
  }

  .button--standard.button--caution:active:not(.button--disabled) {
    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));
    border-color:  var(--nile-colors-dark-900, var(--ng-primary-standard));
    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
  }

  .button--standard.button--caution {
  position: relative;
  overflow: hidden;
  box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));
}

.button--standard.button--caution::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--caution::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--ng-shadow-xs-skeuomorphic);
}

.button.button--disabled {
  box-shadow: none !important;
  border-width: var(--nile-border-width-1, var(--ng-border-width-1)) !important;
}

.button.button--disabled::after {
  box-shadow: none !important;
}

  /* 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-700, var(--ng-colors-bg-error-solid));
    border-color:  var(--nile-colors-dark-900, 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-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-red-400,var(--ng-colors-bg-disabled));
    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));
    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));
    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-white-base, 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-disabled-subtle)) !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.button--disabled ::slotted(nile-icon:not([color])) {
    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !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;
  }

  /* 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,var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;
  }
  .button--standard.button--caution.button--disabled{
    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));
    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));
    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));
    border-width: var(--ng-border-width-1, 1px);
    border-style: var(--ng-border-style-solid, solid);
  }

  .button--standard.button--caution ::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--caution.button--disabled ::slotted(nile-icon:not([color])) {
    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !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;
  }

  .button--standard.button--destructive.button--disabled{
    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));
    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));
    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));
    border-width: var(--ng-border-width-1, 1px);
    border-style: var(--ng-border-style-solid, solid);
  }

  /*
   * 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-neutral-700);
    background-color:var(--nile-colors-dark-200);
  }

  .button--outline.button--secondary:active:not(.button--disabled) {
    border-color: var(--nile-colors-neutral-700);
    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 */
  .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) {
    background-color: var(--nile-colors-blue-100);
  }

  .button--outline.button--primary:active:not(.button--disabled) {
    border-color: var(--nile-colors-primary-700);
    box-shadow:var(--nile-box-shadow-6);
    background-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;
  }
`;