@pega/cosmos-react-social 5.0.0-dev.4.9 → 5.0.0-dev.5.0

package/lib/components/Email/Email.styles.js

@@ -0,0 +1,392 @@
+import styled, { css } from 'styled-components';
+import { mix, readableColor } from 'polished';
+import { Button, calculateFontSize, defaultThemeProp, EmailDisplay, FieldValueList, MenuButton, StyledFieldName, StyledFieldValue, StyledSecondary, StyledSummaryItemActions, StyledVisual, tryCatch, readableHue, nlpColors, StyledPopover, StyledButton, StyledEmptyState, Count } from '@pega/cosmos-react-core';
+import { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
+import { StyledEmailSummaryItem, StyledMessageAndDate } from './EmailSummaryItem';
+export const StyledEmailMoreInfoButton = styled.button `
+  min-height: 0.5rem;
+  min-width: 0.5rem;
+  flex-shrink: 0;
+`;
+export const StyledEmailHeader = styled.div(({ theme }) => {
+    return css `
+    grid-column-gap: ${theme.base.spacing};
+    padding: 0 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
+    ${StyledVisual},${StyledSummaryItemActions} {
+      align-self: flex-start;
+    }
+    ${StyledSecondary} {
+      margin-top: calc(0.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledEmailHeader.defaultProps = defaultThemeProp;
+export const StyledSuggestedRepliesButton = styled(Button)(({ theme }) => {
+    return css `
+    & + & {
+      margin-inline-start: 0;
+    }
+    margin-block-start: ${theme.base.spacing};
+    :not(:last-child) {
+      margin-inline-end: ${theme.base.spacing};
+    }
+  `;
+});
+StyledSuggestedRepliesButton.defaultProps = defaultThemeProp;
+export const StyledSuggestedRepliesMenuButton = styled(MenuButton)(({ theme }) => {
+    return css `
+    &&& {
+      margin-inline-start: 0;
+    }
+    margin-block-start: ${theme.base.spacing};
+    :not(:last-child) {
+      margin-inline-end: ${theme.base.spacing};
+    }
+  `;
+});
+StyledSuggestedRepliesMenuButton.defaultProps = defaultThemeProp;
+export const StyledEmailBody = styled.div ``;
+export const StyledFromEmailDisplay = styled(EmailDisplay)(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+    font-size: ${fontSize.m};
+  `;
+});
+StyledFromEmailDisplay.defaultProps = defaultThemeProp;
+export const StyledEmailDisplay = styled.span `
+  font-size: inherit;
+`;
+export const StyledEmailPrimaryFieldValueList = styled(FieldValueList) `
+  grid-template-columns: auto 1fr;
+`;
+export const StyledEmailSecondaryFieldValueList = styled(FieldValueList)(({ theme }) => {
+    return css `
+    grid-template-columns: 1fr;
+    gap: 0;
+    padding: ${theme.base.spacing} 0;
+    ${StyledFieldValue}:not(:last-child) {
+      margin-bottom: calc(2 * ${theme.base.spacing});
+    }
+    ${StyledFieldName} {
+      margin-bottom: calc(0.25 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledEmailSecondaryFieldValueList.defaultProps = defaultThemeProp;
+export const StyledEmailMoreInfoPopover = styled.div `
+  max-width: 30rem;
+`;
+StyledEmailMoreInfoPopover.defaultProps = defaultThemeProp;
+export const StyledSecondarySeparator = styled.div(({ theme }) => {
+    return css `
+    margin: 0 calc(${theme.base.spacing} / 2);
+  `;
+});
+StyledSecondarySeparator.defaultProps = defaultThemeProp;
+export const StyledEmail = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    ${StyledBanner} {
+      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});
+    }
+  `;
+});
+StyledEmail.defaultProps = defaultThemeProp;
+export const StyledEmailEntity = styled.mark(({ entity, theme }) => {
+    const variant = entity.variant;
+    const backgroundColor = readableHue(nlpColors[variant % nlpColors.length], theme.base.palette['primary-background']);
+    const textColor = tryCatch(() => readableColor(backgroundColor));
+    return css `
+    border-radius: calc(${theme.base['border-radius']} / 3);
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    background-color: ${backgroundColor};
+    color: ${textColor};
+    display: inline-block;
+  `;
+});
+StyledEmailEntity.defaultProps = defaultThemeProp;
+export const StyledEntityList = styled(FieldValueList)(({ theme }) => {
+    const textColor = tryCatch(() => readableColor(theme.base.palette['primary-background']));
+    return css `
+    ${StyledFieldName} {
+      color: ${textColor};
+    }
+    ${StyledEmailEntity} {
+      padding: 0 calc(0.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledEntityList.defaultProps = defaultThemeProp;
+export const StyledForwardedContentToggle = styled(Button) `
+  align-self: flex-start;
+`;
+export const StyledLoadMore = styled.div(({ theme }) => {
+    return css `
+    margin: ${theme.base.spacing} 0;
+    min-height: 2rem;
+    min-width: 2rem;
+  `;
+});
+StyledLoadMore.defaultProps = defaultThemeProp;
+export const StyledContextMenuFieldSelector = styled.div(({ theme, selected }) => {
+    const background = selected
+        ? theme.base.colors.green.medium
+        : theme.base.palette['primary-background'];
+    const borderColor = selected
+        ? theme.base.colors.green['extra-light']
+        : theme.base.palette['primary-background'];
+    return css `
+    background-color: ${background};
+    border: 0.0625rem solid ${borderColor};
+    border-radius: 100%;
+    display: inline-block;
+    height: 0.625rem;
+    width: 0.625rem;
+    background-clip: content-box;
+    padding: 0.0625rem;
+  `;
+});
+StyledContextMenuFieldSelector.defaultProps = defaultThemeProp;
+export const StyledEmailShellHeader = styled.header ``;
+export const StyledEmailConversationList = styled.ul ``;
+export const StyledEmailShell = styled.div(props => {
+    const { theme: { base }, singleConversation } = props;
+    return css `
+      min-width: 30rem;
+      height: 100%;
+      border-radius: ${base['border-radius']};
+      > ${StyledEmailShellHeader} {
+        padding-inline: calc(2 * ${base.spacing}) ${base.spacing};
+        padding-block: ${base.spacing};
+        background: ${base.palette['primary-background']};
+        border-radius: ${base['border-radius']};
+
+        ${singleConversation &&
+        `
+          border-radius: ${base['border-radius']} ${base['border-radius']} 0 0;
+          border-bottom: 0.0625rem solid ${base.palette['border-line']};
+      `}
+      }
+      > ${StyledEmailConversationList} {
+        height: 100%;
+        overflow-y: auto;
+        list-style-type: none;
+      }
+    `;
+});
+StyledEmailShell.defaultProps = defaultThemeProp;
+export const StyledContextMenu = styled.div(({ theme }) => {
+    return css `
+    header {
+      background-color: ${theme.base.palette['secondary-background']};
+    }
+  `;
+});
+StyledContextMenu.defaultProps = defaultThemeProp;
+export const StyledList = styled.div(() => {
+    return css `
+    position: sticky;
+  `;
+});
+StyledList.defaultProps = defaultThemeProp;
+export const StyledHeader = styled.header(() => {
+    return css `
+    position: sticky;
+    top: var(--appshell-offset);
+    height: 4rem;
+    padding-inline-start: 0;
+  `;
+});
+export const StyledEmailCaseViewHeader = styled.header(() => {
+    return css `
+    top: var(--appshell-offset);
+    height: 4rem;
+    padding-inline-start: 0;
+  `;
+});
+export const StyledUtilitiesContainer = styled.div(({ showExpandedUtilities }) => {
+    return css `
+      ${showExpandedUtilities
+        ? css `
+            flex-shrink: 0;
+            max-width: 23rem;
+          `
+        : css `
+            position: sticky;
+            top: calc(var(--appshell-offset));
+            height: fit-content;
+          `}
+    `;
+});
+export const StyledGridContainer = styled.div(({ theme, showExpandedUtilities, hasHeader }) => {
+    return css `
+    min-height: calc(100vh - var(--appshell-offset, 0rem));
+    background-color: ${theme.base.palette['app-background']};
+    ${hasHeader &&
+        css `
+      top: calc(var(--appshell-offset) + var(--headerOffsetHeight));
+    `}
+    ${!showExpandedUtilities &&
+        css `
+      width: auto;
+    `}
+
+    ${StyledList} {
+      ${hasHeader
+        ? css `
+            top: calc(var(--appshell-offset) + var(--headerOffsetHeight));
+            height: calc(100vh - var(--appshell-offset) - var(--headerOffsetHeight));
+          `
+        : css `
+            top: calc(var(--appshell-offset));
+            height: calc(100vh - var(--appshell-offset));
+          `}
+    }
+    ${StyledUtilitiesContainer} {
+      ${hasHeader &&
+        css `
+        top: calc(var(--appshell-offset) + 4rem);
+      `}
+    }
+  `;
+});
+StyledGridContainer.defaultProps = defaultThemeProp;
+export const StyledCollapsedUtilitiesToggle = styled.button(({ theme }) => {
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    align-self: center;
+  `;
+});
+StyledCollapsedUtilitiesToggle.defaultProps = defaultThemeProp;
+export const StyledExpandedUtilitiesToggle = styled.button(({ theme }) => {
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    align-self: flex-end;
+    margin-inline-end: 0.375rem;
+  `;
+});
+StyledExpandedUtilitiesToggle.defaultProps = defaultThemeProp;
+export const StyledDrawerUtilitiesToggle = styled.button(({ theme }) => {
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    align-self: end;
+    margin-block-start: 3rem;
+  `;
+});
+StyledDrawerUtilitiesToggle.defaultProps = defaultThemeProp;
+export const StyledExpandedUtilities = styled.div(({ showExpandedUtilities }) => {
+    return css `
+      width: inherit;
+      ${!showExpandedUtilities &&
+        css `
+        display: none;
+      `}
+    `;
+});
+export const StyledEmailActions = styled.div(() => {
+    return css `
+    ${StyledButton} + ${StyledButton} {
+      margin-inline-start: 0;
+    }
+    ${StyledButton} + ${StyledPopover} + ${StyledButton} {
+      margin-inline-start: 0;
+    }
+  `;
+});
+export const StyledUtilities = styled.div(({ showExpandedUtilities, theme }) => {
+    return css `
+      ${showExpandedUtilities &&
+        css `
+        width: 25rem;
+      `}
+      margin-inline-end: calc(2 * ${theme.base.spacing});
+    `;
+});
+StyledUtilities.defaultProps = defaultThemeProp;
+export const StyledEmailCaseViewColumns = styled.div(({ hasHeader }) => {
+    return css `
+    ${StyledEmptyState} {
+      flex-grow: 1;
+    }
+    ${StyledEmailShell} {
+      min-width: 0;
+    }
+    ${StyledUtilitiesContainer} {
+      ${hasHeader &&
+        css `
+        top: calc(var(--appshell-offset) + 4rem);
+      `}
+    }
+  `;
+});
+export const StyledEmailCaseViewDrawer = styled.div(({ theme }) => {
+    return css `
+    min-width: 21.875rem;
+    max-width: 31.25rem;
+    width: calc((100vw - 31.25rem) / 10 + 21.875rem);
+    background-color: ${theme.base.palette['primary-background']};
+    height: calc(100vh - 3rem);
+    z-index: ${theme.base['z-index'].drawer - 1};
+    top: 3rem;
+  `;
+});
+StyledEmailCaseViewDrawer.defaultProps = defaultThemeProp;
+export const StyledEmailCaseViewContainer = styled.div(({ theme }) => {
+    return css `
+    padding-inline: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledEmailCaseViewContainer.defaultProps = defaultThemeProp;
+export const StyledEmailManagerContainer = styled.div(({ theme }) => {
+    return css `
+    padding-inline: calc(2 * ${theme.base.spacing});
+    ${StyledEmailCaseViewContainer} {
+      padding-inline: 0;
+    }
+  `;
+});
+StyledEmailManagerContainer.defaultProps = defaultThemeProp;
+export const StyledEmailCountIcon = styled(Count)(({ theme }) => {
+    return css `
+    position: absolute;
+    inset-inline-start: calc(2.5 * ${theme.base.spacing});
+    inset-block-start: calc(-0.5 * ${theme.base.spacing});
+    padding-inline: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledEmailCountIcon.defaultProps = defaultThemeProp;
+export const StyledEmailSummaryList = styled.ol(({ theme }) => {
+    return css `
+    height: 100%;
+    overflow-y: auto;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:focus {
+      ${StyledEmailSummaryItem}[data-current='true'] {
+        box-shadow: ${theme.base.shadow['focus-inset']};
+      }
+    }
+  `;
+});
+StyledEmailSummaryList.defaultProps = defaultThemeProp;
+export const StyledEmailNotificationList = styled(StyledEmailSummaryList)(({ theme }) => {
+    const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    return css `
+    ${StyledEmailSummaryItem} {
+      background-color: ${theme.components['app-shell'].nav['background-color']};
+      &:hover,
+      &:focus-within {
+        background-color: ${hoverColor};
+      }
+    }
+    ${StyledMessageAndDate} {
+      flex-wrap: wrap;
+    }
+  `;
+});
+StyledEmailNotificationList.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Email.styles.js.map

package/lib/components/Email/Email.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Email.styles.js","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport {\n  Button,\n  calculateFontSize,\n  defaultThemeProp,\n  EmailDisplay,\n  FieldValueList,\n  MenuButton,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual,\n  tryCatch,\n  readableHue,\n  nlpColors,\n  StyledPopover,\n  StyledButton,\n  StyledEmptyState,\n  Count\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\n\nimport { EmailEntityProps, EmailShellProps } from './Email.types';\nimport { StyledEmailSummaryItem, StyledMessageAndDate } from './EmailSummaryItem';\n\nexport const StyledEmailMoreInfoButton = styled.button`\n  min-height: 0.5rem;\n  min-width: 0.5rem;\n  flex-shrink: 0;\n`;\n\nexport const StyledEmailHeader = styled.div(({ theme }) => {\n  return css`\n    grid-column-gap: ${theme.base.spacing};\n    padding: 0 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n    ${StyledVisual},${StyledSummaryItemActions} {\n      align-self: flex-start;\n    }\n    ${StyledSecondary} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesButton = styled(Button)(({ theme }) => {\n  return css`\n    & + & {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesButton.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesMenuButton = styled(MenuButton)(({ theme }) => {\n  return css`\n    &&& {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesMenuButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailBody = styled.div``;\n\nexport const StyledFromEmailDisplay = styled(EmailDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    font-size: ${fontSize.m};\n  `;\n});\n\nStyledFromEmailDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledEmailDisplay = styled.span`\n  font-size: inherit;\n`;\n\nexport const StyledEmailPrimaryFieldValueList = styled(FieldValueList)`\n  grid-template-columns: auto 1fr;\n`;\n\nexport const StyledEmailSecondaryFieldValueList = styled(FieldValueList)(({ theme }) => {\n  return css`\n    grid-template-columns: 1fr;\n    gap: 0;\n    padding: ${theme.base.spacing} 0;\n    ${StyledFieldValue}:not(:last-child) {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledFieldName} {\n      margin-bottom: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailSecondaryFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailMoreInfoPopover = styled.div`\n  max-width: 30rem;\n`;\n\nStyledEmailMoreInfoPopover.defaultProps = defaultThemeProp;\n\nexport const StyledSecondarySeparator = styled.div(({ theme }) => {\n  return css`\n    margin: 0 calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledSecondarySeparator.defaultProps = defaultThemeProp;\n\nexport const StyledEmail = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  return css`\n    ${StyledBanner} {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\n\nStyledEmail.defaultProps = defaultThemeProp;\n\nexport const StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const variant = entity.variant;\n  const backgroundColor = readableHue(\n    nlpColors[variant % nlpColors.length],\n    theme.base.palette['primary-background']\n  );\n  const textColor = tryCatch(() => readableColor(backgroundColor));\n  return css`\n    border-radius: calc(${theme.base['border-radius']} / 3);\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${backgroundColor};\n    color: ${textColor};\n    display: inline-block;\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n\nexport const StyledEntityList = styled(FieldValueList)(({ theme }) => {\n  const textColor = tryCatch(() => readableColor(theme.base.palette['primary-background']));\n  return css`\n    ${StyledFieldName} {\n      color: ${textColor};\n    }\n    ${StyledEmailEntity} {\n      padding: 0 calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEntityList.defaultProps = defaultThemeProp;\n\nexport const StyledForwardedContentToggle = styled(Button)`\n  align-self: flex-start;\n`;\n\nexport const StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin: ${theme.base.spacing} 0;\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenuFieldSelector = styled.div<{\n  selected?: boolean;\n}>(({ theme, selected }) => {\n  const background = selected\n    ? theme.base.colors.green.medium\n    : theme.base.palette['primary-background'];\n  const borderColor = selected\n    ? theme.base.colors.green['extra-light']\n    : theme.base.palette['primary-background'];\n  return css`\n    background-color: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n    background-clip: content-box;\n    padding: 0.0625rem;\n  `;\n});\n\nStyledContextMenuFieldSelector.defaultProps = defaultThemeProp;\n\nexport const StyledEmailShellHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps & { singleConversation?: boolean }>(\n  props => {\n    const {\n      theme: { base },\n      singleConversation\n    } = props;\n    return css`\n      min-width: 30rem;\n      height: 100%;\n      border-radius: ${base['border-radius']};\n      > ${StyledEmailShellHeader} {\n        padding-inline: calc(2 * ${base.spacing}) ${base.spacing};\n        padding-block: ${base.spacing};\n        background: ${base.palette['primary-background']};\n        border-radius: ${base['border-radius']};\n\n        ${singleConversation &&\n        `\n          border-radius: ${base['border-radius']} ${base['border-radius']} 0 0;\n          border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      `}\n      }\n      > ${StyledEmailConversationList} {\n        height: 100%;\n        overflow-y: auto;\n        list-style-type: none;\n      }\n    `;\n  }\n);\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenu = styled.div(({ theme }) => {\n  return css`\n    header {\n      background-color: ${theme.base.palette['secondary-background']};\n    }\n  `;\n});\n\nStyledContextMenu.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.div(() => {\n  return css`\n    position: sticky;\n  `;\n});\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.header(() => {\n  return css`\n    position: sticky;\n    top: var(--appshell-offset);\n    height: 4rem;\n    padding-inline-start: 0;\n  `;\n});\n\nexport const StyledEmailCaseViewHeader = styled.header(() => {\n  return css`\n    top: var(--appshell-offset);\n    height: 4rem;\n    padding-inline-start: 0;\n  `;\n});\n\nexport const StyledUtilitiesContainer = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities }) => {\n    return css`\n      ${showExpandedUtilities\n        ? css`\n            flex-shrink: 0;\n            max-width: 23rem;\n          `\n        : css`\n            position: sticky;\n            top: calc(var(--appshell-offset));\n            height: fit-content;\n          `}\n    `;\n  }\n);\n\nexport const StyledGridContainer = styled.div<{\n  showExpandedUtilities?: boolean;\n  hasHeader: boolean;\n}>(({ theme, showExpandedUtilities, hasHeader }) => {\n  return css`\n    min-height: calc(100vh - var(--appshell-offset, 0rem));\n    background-color: ${theme.base.palette['app-background']};\n    ${hasHeader &&\n    css`\n      top: calc(var(--appshell-offset) + var(--headerOffsetHeight));\n    `}\n    ${!showExpandedUtilities &&\n    css`\n      width: auto;\n    `}\n\n    ${StyledList} {\n      ${hasHeader\n        ? css`\n            top: calc(var(--appshell-offset) + var(--headerOffsetHeight));\n            height: calc(100vh - var(--appshell-offset) - var(--headerOffsetHeight));\n          `\n        : css`\n            top: calc(var(--appshell-offset));\n            height: calc(100vh - var(--appshell-offset));\n          `}\n    }\n    ${StyledUtilitiesContainer} {\n      ${hasHeader &&\n      css`\n        top: calc(var(--appshell-offset) + 4rem);\n      `}\n    }\n  `;\n});\n\nStyledGridContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCollapsedUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: center;\n  `;\n});\n\nStyledCollapsedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: flex-end;\n    margin-inline-end: 0.375rem;\n  `;\n});\n\nStyledExpandedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: end;\n    margin-block-start: 3rem;\n  `;\n});\n\nStyledDrawerUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities }) => {\n    return css`\n      width: inherit;\n      ${!showExpandedUtilities &&\n      css`\n        display: none;\n      `}\n    `;\n  }\n);\n\nexport const StyledEmailActions = styled.div(() => {\n  return css`\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n    ${StyledButton} + ${StyledPopover} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nexport const StyledUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities, theme }) => {\n    return css`\n      ${showExpandedUtilities &&\n      css`\n        width: 25rem;\n      `}\n      margin-inline-end: calc(2 * ${theme.base.spacing});\n    `;\n  }\n);\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewColumns = styled.div<{ hasHeader?: boolean }>(({ hasHeader }) => {\n  return css`\n    ${StyledEmptyState} {\n      flex-grow: 1;\n    }\n    ${StyledEmailShell} {\n      min-width: 0;\n    }\n    ${StyledUtilitiesContainer} {\n      ${hasHeader &&\n      css`\n        top: calc(var(--appshell-offset) + 4rem);\n      `}\n    }\n  `;\n});\n\nexport const StyledEmailCaseViewDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: calc(100vh - 3rem);\n    z-index: ${theme.base['z-index'].drawer - 1};\n    top: 3rem;\n  `;\n});\n\nStyledEmailCaseViewDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewContainer = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledEmailCaseViewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailManagerContainer = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n    ${StyledEmailCaseViewContainer} {\n      padding-inline: 0;\n    }\n  `;\n});\n\nStyledEmailManagerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCountIcon = styled(Count)(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-inline-start: calc(2.5 * ${theme.base.spacing});\n    inset-block-start: calc(-0.5 * ${theme.base.spacing});\n    padding-inline: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledEmailCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledEmailSummaryList = styled.ol(({ theme }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus {\n      ${StyledEmailSummaryItem}[data-current='true'] {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailNotificationList = styled(StyledEmailSummaryList)(({ theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n\n  return css`\n    ${StyledEmailSummaryItem} {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n      &:hover,\n      &:focus-within {\n        background-color: ${hoverColor};\n      }\n    }\n    ${StyledMessageAndDate} {\n      flex-wrap: wrap;\n    }\n  `;\n});\n\nStyledEmailNotificationList.defaultProps = defaultThemeProp;\n"]}