.btn-assistant {
  --#{$prefix}btn-padding-start: #{$ouds-button-space-padding-inline-icon-start-default};
  --#{$prefix}btn-padding-end: #{$ouds-button-space-padding-inline-end-icon-start-default};
  --#{$prefix}btn-border-width: #{$ouds-button-border-width-ai};
  --#{$prefix}btn-interaction-border-width: #{$ouds-button-border-width-ai-interaction};
  --#{$prefix}btn-color: #{$ouds-button-color-content-ai-enabled};
  --#{$prefix}btn-bg: initial;
  --#{$prefix}btn-hover-color: #{$ouds-button-color-content-ai-hover};
  --#{$prefix}btn-active-color: #{$ouds-button-color-content-ai-pressed};
  --#{$prefix}btn-disabled-color: #{$ouds-button-color-content-ai-disabled};
  --#{$prefix}btn-focus-color: #{$ouds-button-color-content-ai-focus};
  --#{$prefix}btn-loading-color: #{$ouds-button-color-content-ai-loading};

  border-color: currentcolor;

  &::before {
    flex-shrink: 0;
    width: var(--#{$prefix}btn-icon-size);
    height: var(--#{$prefix}btn-icon-size);
    content: "";
    background-color: currentcolor;
    mask: $btn-assistant-icon center;
  }

  // Reduce the noise for people that don't want some
  @media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (forced-colors: none) {
    background: linear-gradient(var(--#{$prefix}btn-bg, var(--#{$prefix}color-bg-primary))) padding-box, conic-gradient($ouds-color-ai-secondary 0deg 82deg, $ouds-color-ai-tertiary 82deg 118deg, $ouds-color-ai-quaternary 118deg 242deg, $ouds-color-ai-primary 242deg 360deg) border-box;
    @supports (background-clip: border-area) {
      background: conic-gradient($ouds-color-ai-secondary 0deg 82deg, $ouds-color-ai-tertiary 82deg 118deg, $ouds-color-ai-quaternary 118deg 242deg, $ouds-color-ai-primary 242deg 360deg) border-box border-area;
    }
    border-color: transparent;

    &:is(:hover, :active, :focus-visible) {
      border-color: transparent;
    }

    &:is(:disabled, [aria-disabled="true"]):not(.loading-indeterminate, .loading-determinate) {
      background: initial;
    }
  }

  &.btn-icon {
    --#{$prefix}btn-border-radius: #{$ouds-button-border-radius-ai-icon-only};
  }

  &.btn-small {
    --#{$prefix}btn-padding-start: #{$ouds-button-space-padding-inline-icon-start-small};
    --#{$prefix}btn-padding-end: #{$ouds-button-space-padding-inline-start-icon-end-small};
  }
}