:global(.webchat-fluent) .suggested-action {
  align-items: center;
  background: transparent;
  border-radius: var(--webchat-borderRadiusXLarge);
  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandStroke2);
  color: currentColor;
  cursor: pointer;
  display: flex;
  font-family: var(--webchat__font--primary);
  font-size: var(--webchat-fontSizeBase200);
  gap: var(--webchat-spacingHorizontalXS);
  padding: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalS);
  text-align: start;
  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);

  @media (hover: hover) {
    &:not([aria-disabled='true']):hover {
      background-color: var(--webchat-colorBrandBackground2Hover);
      color: var(--webchat-colorBrandForeground2Hover);
    }
  }
  &:not([aria-disabled='true']):active {
    background-color: var(--webchat-colorBrandBackground2Pressed);
    color: var(--webchat-colorBrandForeground2Pressed);
  }
  &[aria-disabled='true'] {
    color: var(--webchat-colorNeutralForegroundDisabled);
    cursor: not-allowed;
  }
}

:global(.webchat-fluent) .suggested-action__image {
  font-size: var(--webchat-fontSizeBase200);
  height: 1em;
  width: 1em;
}