/// @FIXME all tokens here need to be adjusted after
///        the new sentiment tokens land

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

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

  a, button {
    text-underline-offset: calc(var(--size-4) / 2);
    &: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-positive-primary);
    }
  }

  &--negative {
    background-color: var(--color-sentiment-negative-secondary);
    color: var(--color-sentiment-negative-primary);

    a, button {
      color: var(--color-sentiment-negative-primary);

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

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

    .wds-inline-prompt&:has(a, button) {
      &:hover {
        background-color: var(--color-sentiment-negative-secondary-hover);
      }
      &:active {
        background-color: var(--color-sentiment-negative-secondary-active);
      }
    }
  }

  &--positive {
    background-color: var(--color-sentiment-positive-secondary);
    color: var(--color-sentiment-positive-primary);
    a, button {
      color: var(--color-sentiment-positive-primary);
      &:hover {
        color: var(--color-sentiment-positive-primary-hover);
      }
      &:active {
        color: var(--color-sentiment-positive-primary-active);
      }
    }
    .wds-inline-prompt&:has(a, button) {
      &:hover {
        background-color: var(--color-sentiment-positive-secondary-hover);
      }
      &:active {
        background-color: var(--color-sentiment-positive-secondary-active);
      }
    }
  }

  &--proposition {
    background-color: #D2F9F7;

    color: var(--color-interactive-primary);

    a, button {
      color: var(--color-interactive-primary);
      &:hover {
        color: var(--color-interactive-primary-hover);
      }
      &:active {
        color: var(--color-interactive-primary-active);
      }
    }

    .wds-inline-prompt&:has(a, button) {
      &:hover {
        background-color: #B2F4F3;
      }
      &:active {
        background-color: #91F0EE;
      }
    }
  }

  &--neutral {
    background-color: var(--color-background-neutral);
    color: var(--color-content-primary);

    a, button {
      color: var(--color-content-primary);
    }

    .wds-inline-prompt&:has(a, button) {
      &:hover {
        background-color: var(--color-background-neutral-hover);
      }
      &:active {
        background-color: var(--color-background-neutral-active);
      }
    }
  }

  &--warning {
    background-color: var(--color-sentiment-warning-secondary);
    color: var(--color-sentiment-warning-content);

    a, button {
      color: var(--color-sentiment-warning-content);
      &:hover {
        color: var(--color-sentiment-warning-content-hover);
      }
      &:active {
        color: var(--color-sentiment-warning-content-active);
      }
    }

    .wds-inline-prompt&:has(a, button) {
      &:hover {
        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
      }
      &:active {
        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
      }
    }
  }
}
