.wds-inline-prompt {
  display: inline-flex;
  text-align: left;
  padding-top: calc(var(--padding-x-small) / 2);
  padding-bottom: calc(var(--padding-x-small) / 2);
  padding-left: calc(var(--padding-x-small) - 1px);
  padding-right: var(--padding-x-small);
  border-radius: var(--radius-small);
  word-break: break-word;
  overflow-wrap: break-word;

  &: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);
    }
  }

  &--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;
      }
    }
  }

  &__media-wrapper {
    padding-right: calc(var(--size-12) / 2);
    padding-top: calc(var(--size-4) - 1px);
    padding-bottom: calc(var(--size-4) - 1px);

    .tw-icon-tags,
    .tw-icon-confetti {
      color: var(--color-sentiment-content-primary);
    }
  }

  .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;
    };
  }
}
