@atlaskit/editor-common/dist/es2019/styles/shared/smartCard.js

A package that contains common classes and components for editor and renderer

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css } from '@emotion/react';
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { SmartCardSharedCssClassName } from './smart-card';
export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const smartCardStyles = () => css`
	.${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
		max-width: calc(100% - 20px);
		vertical-align: top;
		word-break: break-all;
		${fg('editor_inline_comments_on_inline_nodes') ? `.card-with-comment {
          background: ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"};
          border-bottom: 2px solid ${"var(--ds-border-accent-yellow, #B38600)"};
          box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"};
        }` : ''}
		.card {
			padding-left: ${"var(--ds-space-025, 2px)"};
			padding-right: ${"var(--ds-space-025, 2px)"};
			padding-top: 0.5em;
			padding-bottom: 0.5em;
			margin-bottom: -0.5em;

			.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a:focus {
				${getSelectionStyles([SelectionStyle.BoxShadow])}
			}
		}

		&.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
			${getSelectionStyles([SelectionStyle.BoxShadow])}
		}
		.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
			/* EDM-1717: box-shadow Safari fix start */
			z-index: 1;
			position: relative;
			/* EDM-1717: box-shadow Safari fix end */
		}

		&.danger {
			.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
				/* EDM-1717: box-shadow Safari fix start */
				z-index: 2;
				/* EDM-1717: box-shadow Safari fix end */
			}
		}
	}

	.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
		.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
			cursor: ${
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
fg('linking_platform_smart_links_in_live_pages') ? 'text' : 'pointer'};

			a {
				cursor: ${
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
fg('linking_platform_smart_links_in_live_pages') ? 'pointer' : 'auto'};
			}
		}

		&.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
			${getSelectionStyles([SelectionStyle.BoxShadow])}
			border-radius: ${"var(--ds-border-radius-200, 8px)"};
		}

		&.danger {
			.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
			}
		}
	}

	.${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
		max-width: 100%;
		display: flex;
		justify-content: center;

		.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
			cursor: pointer;
			background-color: ${"var(--ds-background-neutral-subtle, #00000000)"};
			border-radius: ${"var(--ds-border-radius-200, 8px)"};
			border: 1px solid ${"var(--ds-border, #091E4224)"};
			overflow: hidden;
		}

		&.${akEditorSelectedNodeClassName} {
			.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
				${getSelectionStyles([SelectionStyle.BoxShadow])}

				input::selection {
					background-color: ${"var(--ds-background-selected-hovered, #CCE0FF)"};
				}
				input::-moz-selection {
					background-color: ${"var(--ds-background-selected-hovered, #CCE0FF)"};
				}
			}
		}

		&.danger {
			.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
			}
		}
	}

	.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER} {
		.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
			cursor: pointer;
			a {
				cursor: ${
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
fg('linking_platform_smart_links_in_live_pages') ? 'pointer' : 'auto'};
			}
			&::after {
				transition: box-shadow 0s;
			}
		}

		&.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after {
			${getSelectionStyles([SelectionStyle.BoxShadow])}
		}

		&.danger {
			.media-card-frame::after {
				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
				background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
			}
			.richMedia-resize-handle-right::after,
			.richMedia-resize-handle-left::after {
				background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
			}
		}
	}

	.${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME} {
		padding: 0;
	}
`;