.navds-button {
  --__axc-button-icon-size: 1.5rem;
  --__axc-button-icon-margin: -4px;
  --__axc-button-border-color: transparent;
  --__axc-button-border-width: 2px;

  padding: var(--ax-spacing-3) var(--ax-spacing-5);
  border-radius: var(--ax-border-radius-medium);
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  align-items: center;
  justify-content: center;
  gap: var(--ax-spacing-2);
  box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);

  &:focus-visible {
    outline: 2px solid var(--ax-border-focus);
    outline-offset: 2px;
  }
}

.navds-button--small,
.navds-button--xsmall {
  --__axc-button-icon-margin: -2px;
  --__axc-button-icon-size: 1.25rem;
}

.navds-button--small {
  padding: var(--ax-spacing-1) var(--ax-spacing-3);
  min-height: 2rem;
  min-width: 2rem;
}

.navds-button--xsmall {
  padding: var(--ax-spacing-05) var(--ax-spacing-2);
  gap: var(--ax-spacing-1);
}

.navds-button--icon-only {
  padding: var(--ax-spacing-3);

  &.navds-button--small {
    padding: var(--ax-spacing-1);
  }

  &.navds-button--xsmall {
    padding: var(--ax-spacing-05);
  }
}

@supports not selector(:focus-visible) {
  .navds-button:focus {
    outline: 2px solid var(--ax-border-focus);
  }
}

.navds-button__icon {
  font-size: var(--__axc-button-icon-size);
  display: flex;

  &:first-child {
    margin-left: var(--__axc-button-icon-margin);
  }

  &:last-child {
    margin-right: var(--__axc-button-icon-margin);
  }

  .navds-button--icon-only & {
    margin: 0;
  }
}

/*************************
 * .navds-button--primary *
 *************************/
.navds-button--primary {
  background-color: var(--ax-bg-accent-strong);
  color: var(--ax-text-accent-contrast);

  &:hover {
    background-color: var(--ax-bg-accent-strong-hover);
  }

  &:active {
    background-color: var(--ax-bg-accent-strong-pressed);
  }

  &:is(:disabled, .navds-button--disabled) {
    background-color: var(--ax-bg-accent-strong);
  }

  @media (forced-colors: active) {
    &:not(:disabled) {
      background-color: highlight;
      color: highlighttext;
    }

    & span {
      forced-color-adjust: none;
    }
  }
}

/*************************
 * .navds-button--primary-neutral *
 *************************/
.navds-button--primary-neutral {
  background-color: var(--ax-bg-neutral-strong);
  color: var(--ax-text-neutral-contrast);

  &:hover {
    background-color: var(--ax-bg-neutral-strong-hover);
  }

  &:active {
    background-color: var(--ax-bg-neutral-strong-pressed);
  }

  &:is(:disabled, .navds-button--disabled) {
    background-color: var(--ax-bg-neutral-strong);
  }
}

/**************************
* .navds-button--secondary *
 **************************/
.navds-button--secondary {
  --__axc-button-border-color: var(--ax-border-accent);

  background-color: transparent;
  color: var(--ax-text-accent);

  &:hover {
    --__axc-button-border-color: var(--ax-border-accent-strong);

    background-color: var(--ax-bg-accent-moderate-hoverA);
    color: var(--ax-text-accent-strong);
  }

  &:active {
    --__axc-button-border-color: transparent;

    background-color: var(--ax-bg-accent-strong-pressed);
    color: var(--ax-text-accent-contrast);
  }

  &:is(:disabled, .navds-button--disabled) {
    --__axc-button-border-color: var(--ax-border-accent);

    background-color: transparent;
    color: var(--ax-text-accent);
  }
}

/**************************
* .navds-button--secondary-neutral *
 **************************/
.navds-button--secondary-neutral {
  --__axc-button-border-color: var(--ax-border-default);

  background-color: transparent;
  color: var(--ax-text-default);

  &:hover {
    --__axc-button-border-color: var(--ax-border-strong);

    background-color: var(--ax-bg-neutral-moderate-hoverA);
  }

  &:active {
    --__axc-button-border-color: transparent;

    color: var(--ax-text-neutral-contrast);
    background-color: var(--ax-bg-neutral-strong-pressed);
  }

  &:is(:disabled, .navds-button--disabled) {
    --__axc-button-border-color: var(--ax-border-neutral);

    color: var(--ax-text-default);
    background-color: transparent;
  }
}

/****************************
 * .navds-button--tertiary *
 ****************************/
.navds-button--tertiary {
  background-color: transparent;
  color: var(--ax-text-accent);

  &:hover {
    background-color: var(--ax-bg-accent-moderate-hoverA);
    color: var(--ax-text-accent-strong);
  }

  &:active {
    background-color: var(--ax-bg-accent-strong-pressed);
    color: var(--ax-text-accent-contrast);
  }

  &:is(:disabled, .navds-button--disabled) {
    color: var(--ax-text-accent);
    background-color: transparent;
  }
}

/****************************
 * .navds-button--tertiary-neutral *
 ****************************/
.navds-button--tertiary-neutral {
  background-color: transparent;
  color: var(--ax-text-default);

  &:hover {
    background-color: var(--ax-bg-neutral-moderate-hoverA);
  }

  &:active {
    background-color: var(--ax-bg-neutral-strong-pressed);
    color: var(--ax-text-neutral-contrast);
  }

  &:is(:disabled, .navds-button--disabled) {
    color: var(--ax-text-default);
    background-color: transparent;
  }
}

/*************************
 * .navds-button--danger *
 *************************/
.navds-button--danger {
  background-color: var(--ax-bg-danger-strong);
  color: var(--ax-text-danger-contrast);

  &:hover {
    background-color: var(--ax-bg-danger-strong-hover);
  }

  &:active {
    background-color: var(--ax-bg-danger-strong-pressed);
  }

  &:is(:disabled, .navds-button--disabled) {
    background-color: var(--ax-bg-danger-strong);
  }
}

/**************************
 * .navds-button:disabled *
 **************************/

.navds-button:where(:disabled, .navds-button--disabled) {
  cursor: not-allowed;
}

.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
  opacity: var(--ax-opacity-disabled);
}

/* Loader overrides */
.navds-button .navds-loader {
  position: absolute;
}

.navds-button .navds-loader .navds-loader__foreground {
  stroke: currentColor;
}

.navds-button--primary .navds-loader .navds-loader__background,
.navds-button--danger .navds-loader .navds-loader__background {
  stroke: rgb(255 255 255 / 0.3);
}

.navds-button--loading > :not(.navds-loader) {
  visibility: hidden;
}

@media (forced-colors: active) {
  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
    opacity: 1;
    color: GrayText;
  }

  .navds-button {
    border: 1px solid transparent;
    color: ButtonText;
    background-color: ButtonFace;
  }

  .navds-button:not(:disabled):hover {
    background-color: highlighttext;
    border-color: highlight;
    color: highlight;
    box-shadow: none;
  }

  .navds-button:not(:disabled):hover span {
    forced-color-adjust: none;
  }

  .navds-button .navds-loader .navds-loader__foreground {
    stroke: canvas;
  }

  .navds-button--primary .navds-loader .navds-loader__background,
  .navds-button--danger .navds-loader .navds-loader__background {
    stroke: canvastext;
  }
}
