@redocly/theme 0.70.0-next.1 → 0.70.0-next.3

package/src/components/Consent/ConsentDialog.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { UseConsentResult } from '@redocly/theme/core/types';
+import type { ConsentDraft } from '@redocly/theme/core/hooks';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { Switch } from '@redocly/theme/components/Switch/Switch';
+import { useConsentDialog, useThemeHooks } from '@redocly/theme/core/hooks';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+
+const noop = () => {};
+
+export function ConsentDialog(): JSX.Element | null {
+  const { useConsent } = useThemeHooks();
+  const consent = useConsent();
+
+  if (!consent.enabled || !consent.isDialogOpen) {
+    return null;
+  }
+
+  return <ConsentDialogContent consent={consent} />;
+}
+
+function ConsentDialogContent({ consent }: { consent: UseConsentResult }): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { draft, setCategory, dialogRef, close, save, categories } = useConsentDialog(consent);
+
+  return (
+    <Portal>
+      <Overlay
+        className="scroll-lock"
+        data-component-name="Consent/ConsentDialog"
+        onMouseDown={(event) => {
+          if (event.target === event.currentTarget) close();
+        }}
+      >
+        <Dialog
+          ref={dialogRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="redocly-consent-dialog-title"
+          tabIndex={-1}
+        >
+          <TitleRow>
+            <Title id="redocly-consent-dialog-title">
+              {translate('consent.dialog.title', 'Cookie preferences')}
+            </Title>
+            <Button
+              variant="ghost"
+              size="small"
+              icon={<CloseIcon />}
+              aria-label={translate('consent.dialog.close', 'Close')}
+              onClick={close}
+            />
+          </TitleRow>
+          <Description>
+            {translate(
+              'consent.dialog.description',
+              'Choose which cookies this site may use. You can change your choice at any time.',
+            )}{' '}
+            {consent.config?.privacyPolicyUrl ? (
+              <Link to={consent.config.privacyPolicyUrl} external>
+                {translate('consent.privacyPolicy', 'Privacy policy')}
+              </Link>
+            ) : null}
+          </Description>
+          {categories.map((category) => {
+            const gpcLocked = category.id === 'marketing' && consent.gpc;
+            return (
+              <Row key={category.id}>
+                <RowText>
+                  <RowTitle>
+                    {translate(category.titleTranslationKey, category.titleDefault)}
+                  </RowTitle>
+                  <RowDescription>
+                    {translate(category.descriptionTranslationKey, category.descriptionDefault)}
+                  </RowDescription>
+                  {gpcLocked ? (
+                    <GpcNotice>
+                      {translate(
+                        'consent.gpcNotice',
+                        'Your browser asked us not to share your data, so this stays off.',
+                      )}
+                    </GpcNotice>
+                  ) : null}
+                </RowText>
+                {category.locked ? (
+                  <SwitchGroup role="group" aria-label={translate('consent.alwaysOn', 'Always on')}>
+                    <Switch value={true} disabled onChange={noop} />
+                  </SwitchGroup>
+                ) : gpcLocked ? (
+                  <SwitchGroup
+                    role="group"
+                    aria-label={translate('consent.alwaysOff', 'Always off')}
+                  >
+                    <Switch value={false} disabled onChange={noop} />
+                  </SwitchGroup>
+                ) : (
+                  <Switch
+                    value={draft[category.id as keyof ConsentDraft]}
+                    onChange={(value) => setCategory(category.id as keyof ConsentDraft, value)}
+                  />
+                )}
+              </Row>
+            );
+          })}
+          <Actions>
+            <Button variant="outlined" onClick={consent.reject}>
+              {translate('consent.rejectAll', 'Reject all')}
+            </Button>
+            <Spacer />
+            <Button variant="outlined" onClick={consent.accept}>
+              {translate('consent.acceptAll', 'Accept all')}
+            </Button>
+            <Button variant="primary" onClick={save}>
+              {translate('consent.savePreferences', 'Save preferences')}
+            </Button>
+          </Actions>
+        </Dialog>
+      </Overlay>
+    </Portal>
+  );
+}
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-color-modal-overlay);
+  font-family: var(--font-family-base);
+`;
+
+const Dialog = styled.div`
+  width: var(--consent-dialog-width);
+  max-width: var(--consent-dialog-max-width);
+  padding: var(--consent-dialog-padding);
+  border-radius: var(--consent-dialog-border-radius);
+  background: var(--consent-dialog-bg-color);
+  box-shadow: var(--consent-dialog-box-shadow);
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+const Title = styled.h2`
+  margin: 0 0 var(--spacing-xs);
+  font-size: var(--font-size-lg);
+`;
+
+const Description = styled.p`
+  margin: 0 0 var(--spacing-base);
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const Row = styled.div`
+  display: flex;
+  gap: var(--spacing-base);
+  align-items: flex-start;
+  padding: var(--spacing-sm) 0;
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+
+const RowText = styled.div`
+  flex: 1;
+`;
+
+const RowTitle = styled.div`
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+`;
+
+const RowDescription = styled.div`
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const GpcNotice = styled.div`
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const SwitchGroup = styled.div`
+  flex: none;
+`;
+
+const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-base);
+  padding-top: var(--spacing-base);
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+
+const Spacer = styled.span`
+  flex: 1;
+`;

package/src/components/Consent/ConsentSettingsLink.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
+import { resolveSettingsLinkPlacement } from '@redocly/theme/core/utils';
+
+export function ConsentSettingsLink(): JSX.Element | null {
+  const { useConsent, useTranslate } = useThemeHooks();
+  const { consent: consentConfig, footer } = useThemeConfig() || {};
+  const consent = useConsent();
+  const { translate } = useTranslate();
+
+  if (!consent.enabled || resolveSettingsLinkPlacement(consentConfig, footer) !== 'footer') {
+    return null;
+  }
+
+  return (
+    <SettingsLinkButton
+      variant="link"
+      size="small"
+      data-component-name="Consent/ConsentSettingsLink"
+      onClick={consent.openDialog}
+    >
+      {translate('consent.settingsLink', 'Cookie preferences')}
+    </SettingsLinkButton>
+  );
+}
+
+const SettingsLinkButton = styled(Button)`
+  margin: var(--footer-link-padding-vertical) 0 var(--footer-link-padding-vertical) var(--spacing-sm);
+  padding: 0;
+  color: var(--footer-link-text-color);
+  font: inherit;
+  line-height: inherit;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--footer-link-color-hover);
+    background: none;
+  }
+`;

package/src/components/Consent/variables.ts

@@ -0,0 +1,28 @@
+import { css } from 'styled-components';
+
+export const consent = css`
+  /**
+  * @tokens Consent
+  */
+  --consent-banner-width: 380px;
+  --consent-banner-offset: var(--spacing-base); // @presenter Spacing
+  --consent-banner-bg-color: var(--bg-color); // @presenter Color
+  --consent-banner-text-color: var(--text-color-primary); // @presenter Color
+  --consent-banner-border-color: var(--border-color-primary); // @presenter Color
+  --consent-banner-border-radius: var(--border-radius-lg);
+  --consent-banner-box-shadow: var(--bg-raised-shadow);
+  --consent-banner-padding: var(--spacing-base); // @presenter Spacing
+  --consent-banner-gap: var(--spacing-sm); // @presenter Spacing
+  --consent-banner-title-font-size: var(--font-size-base);
+  --consent-banner-font-size: var(--font-size-sm);
+  --consent-banner-z-index: var(--z-index-overlay);
+
+  --consent-dialog-width: 560px;
+  --consent-dialog-max-width: calc(100vw - 2 * var(--spacing-base));
+  --consent-dialog-padding: var(--spacing-lg); // @presenter Spacing
+  --consent-dialog-border-radius: var(--border-radius-lg);
+  --consent-dialog-bg-color: var(--modal-bg-color); // @presenter Color
+  --consent-dialog-box-shadow: var(--modal-box-shadow);
+  --consent-dialog-row-border-color: var(--border-color-primary); // @presenter Color
+  --consent-dialog-description-color: var(--text-color-secondary); // @presenter Color
+`;

package/src/components/Footer/Footer.tsx

@@ -9,6 +9,7 @@ import { breakpoints, isEmptyArray } from '@redocly/theme/core/utils';
 import { useThemeConfig } from '@redocly/theme/core/hooks';
 import { FooterCopyright } from '@redocly/theme/components/Footer/FooterCopyright';
 import { FooterColumn } from '@redocly/theme/components/Footer/FooterColumn';
+import { ConsentSettingsLink } from '@redocly/theme/components/Consent/ConsentSettingsLink';
 
 export type FooterProps = {
   className?: string;
@@ -43,6 +44,7 @@ export function Footer({ className }: FooterProps): JSX.Element | null {
       )}
       <FooterCopyrightWrapper>
         {copyrightText && <FooterCopyright copyrightText={copyrightText} />}
+        <ConsentSettingsLink />
       </FooterCopyrightWrapper>
     </FooterWrapper>
   );

package/src/components/JsonViewer/Helpers.tsx

@@ -7,40 +7,50 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { ShowMoreToggleButton } from '@redocly/theme/components/Button/ShowMoreToggleButton';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
+export type JsonFold = {
+  isExpanded: (path: string, level: number) => boolean;
+  setExpanded: (path: string, expanded: boolean) => void;
+};
+
+type Foldable = [path: string, level: number];
+
+export function isFoldable(value: unknown): value is Record<string, unknown> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    Object.values(value).some((item) => item !== undefined)
+  );
+}
+
+export function collectFoldables(value: unknown, path = '', level = 1): Foldable[] {
+  if (!isFoldable(value)) return [];
+  return Object.entries(value).flatMap(([key, child]): Foldable[] => {
+    const childPath = `${path}/${key}`;
+    return isFoldable(child)
+      ? [[childPath, level], ...collectFoldables(child, childPath, level + 1)]
+      : [];
+  });
+}
+
 export function JsonValue(props: {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
+  path: string;
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
-  defaultExpandLevel: number;
-  expandAllSignal: boolean | undefined;
+  fold: JsonFold;
   maxStringLength?: number;
 }): React.ReactNode {
-  const { standalone, defaultExpandLevel, level, value, expandAllSignal, maxStringLength } = props;
+  const { standalone, fold, level, path, value, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
-
-  const [isExpandedState, setExpanded] = React.useState(
-    expandAllSignal ?? level < defaultExpandLevel,
-  );
-  const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
-  const [prevLevel, setPrevLevel] = React.useState(level);
-
-  if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
-    setPrevExpandAllSignal(expandAllSignal);
-    setPrevLevel(level);
-    if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
-      setExpanded(expandAllSignal);
-    }
-  }
+  const isExpanded = fold.isExpanded(path, level);
 
   const keys: string[] =
     (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
 
   const valueType = typeof value;
-  const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
 
-  if (isPrimitive) {
+  if (!isFoldable(value)) {
     const isOversizedString =
       typeof value === 'string' && maxStringLength !== undefined && value.length > maxStringLength;
     return (
@@ -64,9 +74,9 @@ export function JsonValue(props: {
           <JsonValue
             value={item}
             level={level + 1}
+            path={`${path}/${index}`}
             standalone={true}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
           {index < value.length - 1 ? ',\n' : null}
@@ -78,8 +88,8 @@ export function JsonValue(props: {
             name={key}
             value={value[key]}
             level={level + 1}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            path={`${path}/${key}`}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
           {index < keys.length - 1 ? ',\n' : null}
@@ -90,7 +100,7 @@ export function JsonValue(props: {
     <>
       {indent}
       {level > 0 ? (
-        <ExpandIcon onClick={() => setExpanded((v) => !v)} isExpanded={isExpanded} />
+        <ExpandIcon onClick={() => fold.setExpanded(path, !isExpanded)} isExpanded={isExpanded} />
       ) : null}
       {openingPunctuation}
       {isExpanded ? '\n' : null}
@@ -119,33 +129,18 @@ function JsonKeyValue(props: {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
-  defaultExpandLevel: number;
-  expandAllSignal: boolean | undefined;
+  path: string;
+  fold: JsonFold;
   maxStringLength?: number;
 }): React.ReactNode {
-  const { defaultExpandLevel, level, name, value, expandAllSignal, maxStringLength } = props;
+  const { fold, level, name, path, value, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
-  const keys: string[] =
-    (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
-
-  const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
-  const [isExpandedState, setExpanded] = React.useState(
-    expandAllSignal ?? level < defaultExpandLevel,
-  );
-  const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
-  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
-
-  if (prevExpandAllSignal !== expandAllSignal) {
-    setPrevExpandAllSignal(expandAllSignal);
-    if (expandAllSignal !== undefined) {
-      setExpanded(expandAllSignal);
-    }
-  }
+  const isExpanded = fold.isExpanded(path, level);
 
   const openingPunctuation = Array.isArray(value) ? '[' : '{';
   const closingPunctuation = Array.isArray(value) ? ']' : '}';
 
-  const valueElement = isCollapsible ? (
+  const valueElement = isFoldable(value) ? (
     <>
       {openingPunctuation}
       {isExpanded ? (
@@ -154,8 +149,8 @@ function JsonKeyValue(props: {
           <JsonValue
             value={value}
             level={level}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            path={path}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
           {'\n'}
@@ -170,8 +165,8 @@ function JsonKeyValue(props: {
     <JsonValue
       value={value}
       level={level}
-      defaultExpandLevel={defaultExpandLevel}
-      expandAllSignal={expandAllSignal}
+      path={path}
+      fold={fold}
       maxStringLength={maxStringLength}
     />
   );
@@ -179,8 +174,8 @@ function JsonKeyValue(props: {
   return (
     <>
       {indent}
-      {isCollapsible ? (
-        <ExpandIcon onClick={() => setExpanded((v) => !v)} isExpanded={isExpanded} />
+      {isFoldable(value) ? (
+        <ExpandIcon onClick={() => fold.setExpanded(path, !isExpanded)} isExpanded={isExpanded} />
       ) : null}
       <span className="property token string">{`"${name}"`}</span>: {valueElement}
     </>

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,7 +5,8 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-import { JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import { collectFoldables, JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import type { JsonFold } from '@redocly/theme/components/JsonViewer/Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 
@@ -33,25 +34,20 @@ function JsonComponent({
   controls = {},
   maxStringLength,
 }: JsonProps): JSX.Element {
-  const showFoldingButtons =
-    data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+  const defaultExpandLevel = Math.max(1, expandLevel);
+  const foldables = React.useMemo(() => collectFoldables(data), [data]);
+  const [expandedPaths, setExpandedPaths] = React.useState<Record<string, boolean>>({});
 
-  const [expandAllSignal, setExpandAllSignal] = React.useState<boolean | undefined>(undefined);
-
-  const expandAll = () => {
-    setExpandAllSignal(true);
-    onPanelToggle?.(true);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const fold: JsonFold = {
+    isExpanded: (path, level) => expandedPaths[path] ?? level < defaultExpandLevel,
+    setExpanded: (path, expanded) => setExpandedPaths((prev) => ({ ...prev, [path]: expanded })),
   };
+  const hasFoldables = foldables.length > 0;
+  const allExpanded = foldables.every(([path, level]) => fold.isExpanded(path, level));
 
-  const collapseAll = () => {
-    setExpandAllSignal(false);
-    onPanelToggle?.(false);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const toggleAll = () => {
+    onPanelToggle?.(!allExpanded);
+    setExpandedPaths(Object.fromEntries(foldables.map(([path]) => [path, !allExpanded])));
   };
 
   const source = JSON.stringify(data, null, 2);
@@ -73,12 +69,14 @@ function JsonComponent({
                 controls: controls && {
                   ...controls,
                   copy: { ...controls.copy, data, onClick: onCopyClick, handleOutside: true },
-                  expand: showFoldingButtons
-                    ? { ...controls.expand, onClick: expandAll }
-                    : undefined,
-                  collapse: showFoldingButtons
-                    ? { ...controls.collapse, onClick: collapseAll }
-                    : undefined,
+                  expand:
+                    hasFoldables && !allExpanded
+                      ? { ...controls.expand, onClick: toggleAll }
+                      : undefined,
+                  collapse:
+                    hasFoldables && allExpanded
+                      ? { ...controls.collapse, onClick: toggleAll }
+                      : undefined,
                 },
               }
             : undefined
@@ -89,9 +87,9 @@ function JsonComponent({
           <JsonValue
             value={data}
             level={0}
+            path=""
             standalone={true}
-            expandAllSignal={expandAllSignal}
-            defaultExpandLevel={Math.max(1, expandLevel)}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
         </FoldingWrap>

package/src/components/Markdown/styles/base-table.ts

@@ -22,7 +22,7 @@ export const markdownBaseTableCss = css`
       color: var(--md-table-cell-text-color);
       font-size: var(--md-table-font-size);
       line-height: var(--md-table-line-height);
-      vertical-align: top;
+      vertical-align: var(--md-table-cell-vertical-align);
     }
 
     thead td,
@@ -71,5 +71,18 @@ export const markdownBaseTableCss = css`
     th[align='right'] {
       text-align: right;
     }
+
+    th[valign='top'],
+    td[valign='top'] {
+      vertical-align: top;
+    }
+    th[valign='middle'],
+    td[valign='middle'] {
+      vertical-align: middle;
+    }
+    th[valign='bottom'],
+    td[valign='bottom'] {
+      vertical-align: bottom;
+    }
   }
 `;

package/src/components/Markdown/variables.ts

@@ -51,6 +51,7 @@ export const markdown = css`
   --md-table-cell-text-color: var(--text-color-secondary); // @presenter Color
   --md-table-cell-padding: var(--spacing-xs) var(--spacing-sm); // @presenter Spacing
   --md-table-footer-cell-padding: var(--spacing-xxs) var(--spacing-sm); // @presenter Spacing
+  --md-table-cell-vertical-align: top;
 
   --md-table-head-bg-color: var(--md-table-bg-color); // @presenter Color
   --md-table-head-text-color: var(--text-color-primary); // @presenter Color

package/src/components/Product/utils.ts

@@ -2,5 +2,5 @@ export function getProductClassName(productName: string): string {
   return `product-${productName
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')}`;
+    .replace(/^-+|(?<!-)-+$/g, '')}`;
 }

package/src/components/Search/SearchAiConversationInput.tsx

@@ -30,18 +30,24 @@ export function SearchAiConversationInput({
   const { translate } = useTranslate();
 
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const wasGeneratingResponseRef = useRef(isGeneratingResponse);
   const [query, setQuery] = useState('');
 
   useEffect(() => {
-    if (!isGeneratingResponse && inputRef.current) {
+    const wasGeneratingResponse = wasGeneratingResponseRef.current;
+    wasGeneratingResponseRef.current = isGeneratingResponse;
+
+    if (wasGeneratingResponse && !isGeneratingResponse) {
       requestAnimationFrame(() => {
         inputRef.current?.focus();
       });
     }
   }, [isGeneratingResponse]);
 
+  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
+
   const handleSendMessage = () => {
-    if (disabled) return;
+    if (isDisabled) return;
 
     setQuery('');
     onMessageSent(query);
@@ -59,8 +65,6 @@ export function SearchAiConversationInput({
     }
   };
 
-  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
-
   const commonProps = {
     placeholder:
       placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'),
@@ -91,7 +95,8 @@ export function SearchAiConversationInput({
       )}
 
       <SendButton
-        disabled={isDisabled}
+        aria-label={translate('search.ai.send', 'Send question')}
+        aria-disabled={isDisabled}
         size="small"
         icon={
           <SendIcon
@@ -176,11 +181,12 @@ const SendButton = styled(Button)`
   border-radius: var(--search-ai-conversation-input-send-button-border-radius);
   padding: var(--search-ai-conversation-input-send-button-padding);
 
-  &:hover {
+  &:hover:not([aria-disabled='true']) {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
   }
 
-  &:disabled {
+  &[aria-disabled='true'] {
+    cursor: default;
     background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
     border: var(--search-ai-conversation-input-send-button-border-disabled);
   }