.wds-inline-prompt {
  --Prompt-gap: calc(var(--size-12) / 2);
  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);

  display: inline-flex;
  border-radius: var(--radius-small);

  &:has(a),
  &:has(button) {
    position: relative;
    z-index: 1;

    &:hover {
      background-color: var(--color-sentiment-background-surface-hover);
    }

    &:active {
      background-color: var(--color-sentiment-background-surface-active);
    }
  }

  &--auto-width {
    width: unset;
  }

  &--muted {
    opacity: 0.93;
    filter: grayscale(1);
  }

  a,
  button {
    color: var(--color-sentiment-content-primary);
    text-underline-offset: calc(var(--size-4) / 2);

    &:hover {
      color: var(--color-sentiment-content-primary-hover);
    }

    &:active {
      color: var(--color-sentiment-content-primary-active);
    }

    &:first-of-type {
      &:before {
        content: "";
        position: absolute;
        inset: 0;
      }
    }
  }

  .wds-inline-prompt-process-indicator {
    width: var(--size-16);
    height: var(--size-16);

    // This belongs in ProcessIndicator but there are many conflicting
    // styles in the CSS package, so keeping it colocated for now.
    .process-circle {
      stroke: currentColor;
    }
  }
}