import styled, { createGlobalStyle, css } from 'styled-components';
import { darken, getContrast, lighten, rem, remToPx, transparentize } from 'polished';
import { useContext } from 'react';
import { StyledAlert } from '../Badges/Alert';
import { ellipsisOverflow } from '../../styles/mixins';
import { StyledLink } from '../Link/Link';
import { Count } from '../Badges';
import { StyledAvatar } from '../Avatar';
import { StyledIcon } from '../Icon';
import { StyledImage } from '../Image/Image';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize, calculateForegroundColor, calculateBackgroundAndContrastColor, readableColor } from '../../styles';
import { StyledMenuItem } from '../Menu/Menu.styles';
import { useDirection } from '../../hooks';
import { StyledBareButton } from '../Button/BareButton';
import Button from '../Button';
import { StyledTooltip } from '../Tooltip';
import { StyledProgressBackdrop } from '../Progress';
import Icon from '../Icon/Icon';
import { StyledText } from '../Text';
import Flex from '../Flex';
import { resizeDrawerMaxWidth } from '../../styles/constants';
import { tryCatch } from '../../utils';
import { StyledDrawer } from '../Drawer';
import AppShellContext from './AppShellContext';
import { navContrastColors } from './style-utils';
export const navWidth = '4rem';
export const navOpenWidth = '18.75rem';
export const headerHeight = '3rem';
export const mobileHeaderHeight = '4.5rem';
export const topNavHeight = '3rem';
const iconWidth = '1.125rem';
const iconBoxSize = `calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2)`;
export const AppShellGlobalStyle = createGlobalStyle `
  :root,
  :host {
    --appshell-top-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-start, 0rem));
    --appshell-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem) + ${({ navHeight }) => navHeight});
    --appshell-hard-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem));
  }
`;
export const menuButtonWidth = (theme) => Number.parseInt(theme.base['hit-area']['finger-min'], 10) +
    Number.parseInt(tryCatch(() => remToPx(1.25), () => '20px'), 10);
export const StyledAppInfo = styled.a(({ theme }) => {
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    const { hoverBg, foreground } = navContrastColors(theme);
    return css `
    padding: ${theme.base.spacing} calc(${navWidth} / 4);
    grid-template-columns: calc(${navWidth} / 2) auto;
    column-gap: calc(${navWidth} / 4);
    vertical-align: middle;

    &:hover,
    button&:hover {
      background-color: ${hoverBg};
      text-decoration: none;
    }

    &:focus:not([disabled]) {
      outline: none;
      box-shadow: ${theme.base.shadow['focus-inset']};
    }

    ${StyledImage} {
      display: inline-block;
      width: calc(${navWidth} / 2);
      margin-inline-end: calc(${theme.base.spacing} * 2);
      vertical-align: middle;
    }

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    span:last-of-type {
      font-size: ${fontSize.xs};
      color: ${foreground};
    }

    span:first-of-type {
      font-size: ${fontSize.s};
      color: ${foreground};
      margin-inline-end: calc(${theme.base.spacing});
      vertical-align: middle;
    }
  `;
});
StyledAppInfo.defaultProps = defaultThemeProp;
export const StyledScrollWrap = styled(Flex)(({ theme }) => {
    return css `
    overflow-x: hidden;
    overflow-y: auto;
    padding-block-start: calc(0.125 * ${theme.base.spacing});

    @media (height <= ${theme.base.breakpoints.sm}) {
      overflow: visible;
      flex-shrink: 0;
    }
  `;
});
StyledScrollWrap.defaultProps = defaultThemeProp;
export const StyledUtilsSeparator = styled.div(({ theme, navOpen }) => {
    return css `
    position: sticky;
    inset-block-end: 0;
    margin-block-start: auto;
    margin-inline: var(--nav-padding);
    border-block-start: 0.0625rem solid ${theme.components['app-shell'].nav['separator-color']};

    @media (height <= ${theme.base.breakpoints.sm}) {
      position: relative;
      margin-inline-end: calc(var(--nav-padding) / 2);

      ${navOpen &&
        css `
        margin-inline-end: var(--nav-padding);
      `}
    }
  `;
});
StyledUtilsSeparator.defaultProps = defaultThemeProp;
export const StyledCountIcon = styled(Count) `
  position: absolute;
  /* stylelint-disable-next-line unit-allowed-list */
  inset-block-start: 0.25lh;
  inset-inline-start: calc((${navWidth} / 2) - var(--nav-padding));
`;
StyledCountIcon.defaultProps = defaultThemeProp;
export const StyledSingleSelectIconBox = styled.span(({ theme }) => {
    return css `
    flex-shrink: 0;
    height: ${theme.base['hit-area']['mouse-min']};
    width: ${theme.base['hit-area']['mouse-min']};
    margin-inline-start: calc(2 * ${theme.base.spacing});
  `;
});
StyledSingleSelectIconBox.defaultProps = defaultThemeProp;
export const StyledNavListItemExpandCollapse = styled(Icon) ``;
export const StyledNavListItemGroupIndicator = styled(Icon)(({ theme: { components: { 'app-shell': { nav: { detached } } } } }) => {
    return css `
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    margin-block-start: calc(${iconWidth} / 8);
    margin-inline-start: 2.5rem;
    ${detached &&
        css `
      margin-inline-start: calc(${navWidth} / 2 - ${iconWidth} / 6);
    `}
  `;
});
StyledNavListItemGroupIndicator.defaultProps = defaultThemeProp;
export const StyledUtilIconCount = styled.span `
  flex-shrink: 0;
`;
export const StyledNavItemIconBox = styled.span(({ theme }) => {
    return css `
    flex-shrink: 0;

    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {
      margin-inline: ${iconBoxSize};
    }

    ${StyledAvatar} {
      margin-inline: calc(
        (${navWidth} - ${theme.base['hit-area']['mouse-min']} - 2 * var(--nav-padding)) / 2
      );
      margin-block: calc(0.5 * ${theme.base.spacing});
      font-weight: ${theme.base['font-weight'].normal};
    }
  `;
});
StyledNavItemIconBox.defaultProps = defaultThemeProp;
const StyledAppNav = styled.nav(({ theme }) => {
    const navBg = theme.components['app-shell'].nav.background;
    const navFgColor = theme.components['app-shell'].nav['foreground-color'];
    const foregroundColor = calculateForegroundColor(navBg, navFgColor);
    return css `
    --nav-padding: ${theme.components['app-shell'].nav.detached ? '0.75rem' : '0px'};
    background: ${navBg};
    color: ${foregroundColor};
    overflow: hidden;
    white-space: nowrap;
    border-color: ${theme.components['app-shell'].nav['border-color']};

    @media (height <= ${theme.base.breakpoints.sm}) {
      overflow-y: auto;
      overflow-x: clip;
    }
    padding-block-start: ${theme.base.spacing};

    /* App navigation can be focused with shortcut */
    &:focus-visible {
      box-shadow: ${theme.base.shadow['focus-inset']};
    }

    ${theme.base['custom-scrollbar'] &&
        css `
      * {
        scrollbar-width: thin;
      }
    `}
  `;
});
StyledAppNav.defaultProps = defaultThemeProp;
export const StyledSidebarNav = styled(StyledAppNav)(({ withAppHeader, portalAgent, theme }) => {
    const { rtl } = useDirection();
    const { navState } = useContext(AppShellContext);
    return css `
    position: fixed;
    z-index: calc(${theme.base['z-index'].backdrop} - 2);
    max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});
    width: calc(
      ${navState === 'open' || navState === 'opening' ? navOpenWidth : navWidth} +
        var(--safe-area-inset-inline-start, 0rem)
    );
    transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
    height: calc(100dvh - ${withAppHeader ? headerHeight : '0rem'});
    padding-inline-start: var(--safe-area-inset-inline-start, 0);
    padding-block-end: ${theme.base.spacing};

    @media (pointer: coarse) {
      max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
    }

    ${portalAgent
        ? css `
          box-shadow: inset ${rtl ? '0.0625rem' : '-0.0625rem'} 0 0 0
            ${theme.components['app-shell'].nav['border-color']};
        `
        : css `
          border-inline-end: 0.0625rem solid ${transparentize(0.9, '#000')};
          border-color: ${theme.components['app-shell'].nav['border-color']};
        `}
  `;
});
StyledSidebarNav.defaultProps = defaultThemeProp;
export const StyledCaseClose = styled.button ``;
export const StyledNavListItemVisualContainer = styled.div(({ theme: { base: { spacing }, components: { 'app-shell': { nav: { detached } } } }, isCurrent, navOpen }) => {
    return css `
      max-width: ${navWidth};

      &:has(${StyledAvatar}) {
        ${StyledNavListItemGroupIndicator} {
          display: none;
        }
      }

      & > ${StyledText} {
        padding-inline: ${isCurrent
        ? `${spacing} calc(0.5 * ${spacing})`
        : `calc(0.5 * ${spacing})`};

        ${!navOpen &&
        detached &&
        css `
          padding-inline: 0;
          max-width: calc(${navWidth} * 0.625);
        `}
      }
    `;
});
StyledNavListItemVisualContainer.defaultProps = defaultThemeProp;
export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, singleSelect }) => {
    const { base: { 'font-weight': { 'semi-bold': semiBold } }, components: { 'app-shell': { nav: { detached, 'item-border-radius': navItemBorderRadius, 'selected-background': navSelectedBackground } } } } = theme;
    const { navOpen } = useContext(AppShellContext);
    const { foreground, nestedList } = navContrastColors(theme);
    const { rtl } = useDirection();
    const nestedListColor = theme.components['app-shell'].nav['nested-list-background'] === 'auto'
        ? nestedList
        : theme.components['app-shell'].nav['nested-list-background'];
    return css `
    display: block;
    position: relative;
    padding-block: 0;
    padding-inline: var(--nav-padding);

    ${StyledIcon} {
      font-size: 1.25rem;
    }

    ${StyledCaseClose} {
      display: flex;
      position: absolute;
      opacity: 0;
      left: ${navOpen ? 'auto' : '100%'};
      top: 50%;
      bottom: 50%;
      margin: auto 0;
      color: ${foreground};
      transition-property: transform, opacity;
      transition-duration: ${theme.base.animation.speed};
      transition-timing-function: ${theme.base.animation.timing.ease};
      ${navOpen &&
        css `
        inset-inline-end: 1rem;

        &:hover,
        &:focus {
          opacity: 1;
        }
      `}
    }

    &:first-child ${StyledNavListItemGroupIndicator} {
      display: none;
    }

    > :first-child {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding-block: ${theme.base.spacing};
      padding-inline: 0;
      white-space: nowrap;
      color: ${foreground};
      cursor: pointer;
      text-decoration: none;
      border-block: ${rem(1)} solid transparent;

      ${detached &&
        css `
        --item-height: 2.5rem;
        padding: 0;
        min-height: var(--item-height);
        height: auto;
        border: none;
        border-radius: ${navItemBorderRadius};
        transition: border-radius ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
      `}
      ${detached &&
        css `
        &:not(:only-child):has(+ ul) {
          background: ${nestedListColor};
          margin-block-end: 0.0625rem;
          border-end-start-radius: 0;
          border-end-end-radius: 0;
        }
      `}
          span:not(${StyledCountIcon}) {
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
        white-space: nowrap;
      }

      &:hover,
      &:focus {
        color: ${foreground};
        background: ${transparentize(0.9, foreground)};
      }

      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {
        ${navOpen &&
        css `
          opacity: 1;
        `}
      }

      &:focus {
        box-shadow: ${theme.base.shadow['focus-inset']};

        @media (forced-colors: none) {
          &:not([aria-current='page'], [aria-expanded='false']:has(+ ul [aria-current='page'])) {
            outline: none;
          }
        }
      }

      ${StyledNavListItemExpandCollapse} {
        position: absolute;
        left: ${navOpen ? 'auto' : '100%'};
        ${navOpen &&
        css `
          inset-inline-end: 1rem;
        `}
        margin: 0;
        opacity: ${navOpen ? '1' : '0'};
        transition-property: transform, opacity;
        transition-duration: ${theme.base.animation.speed};
        transition-timing-function: ${theme.base.animation.timing.ease};

        ${!nestedListCollapsed &&
        css `
          transform: rotateZ(${rtl ? '-90deg' : '90deg'});
        `}
      }

      ${singleSelect &&
        css `
        ${StyledNavItemIconBox} > ${StyledIcon} {
          margin-inline: calc(${theme.base.spacing} - var(--nav-padding));
        }
      `}
      ${StyledSingleSelectIconBox} + span {
        margin-inline-start: ${theme.base.spacing};
      }
    }

    [aria-expanded='true'] {
      ${StyledNavListItemGroupIndicator} {
        display: none;
      }
    }

    [aria-current='page'],
    [aria-expanded='false']:has(+ ul [aria-current='page']) {
      position: relative;
      font-weight: ${semiBold};
      border-block: ${rem(1)} solid ${theme.components['app-shell'].nav['border-color']};
      background: ${transparentize(0.85, foreground)};
      ${detached &&
        css `
        background: ${navSelectedBackground !== 'auto'
            ? navSelectedBackground
            : transparentize(0.9, foreground)};
        outline: 0.0625rem solid;

        &:hover,
        &:focus {
          background: ${navSelectedBackground !== 'auto'
            ? navSelectedBackground
            : transparentize(0.9, foreground)};
        }
      `}

      ${!detached &&
        css `
        &::before {
          content: '';
          position: absolute;
          width: ${rem(4)};
          inset-inline-start: 0;
          top: 0;
          bottom: 0;
          background-color: ${foreground};
        }
      `}
    }

    ${StyledNavItemIconBox} {
      display: flex;
      justify-content: center;
      width: calc(${navWidth} - 2 * var(--nav-padding));
    }
  `;
});
StyledNavListItem.defaultProps = defaultThemeProp;
export const StyledNavList = styled.ul(({ theme }) => {
    return css `
    min-width: ${navWidth};

    & > ${StyledNavListItem} {
      &:not(:last-child),
      &:only-child {
        margin-block-end: calc(${theme.base.spacing} / 2);
      }
    }

    & > ${StyledNavListItem}:last-of-type {
      padding-block-end: calc(${theme.base.spacing} / 2);
    }
  `;
});
StyledNavList.defaultProps = defaultThemeProp;
export const StyledNavCasesList = styled.div(({ theme }) => {
    return css `
    ${StyledNavListItem} {
      > :first-child {
        padding: ${theme.base.spacing} 0;
      }
    }
  `;
});
StyledNavCasesList.defaultProps = defaultThemeProp;
export const StyledNestedNavList = styled(StyledNavList)(({ theme }) => {
    const { base: { 'border-radius': borderRadius, spacing }, components: { 'app-shell': { nav: { detached, 'selected-background': navSelectedBackground } } } } = theme;
    const { nestedList, foreground } = navContrastColors(theme);
    const nestedListColor = theme.components['app-shell'].nav['nested-list-background'] === 'auto'
        ? nestedList
        : theme.components['app-shell'].nav['nested-list-background'];
    const resolvedSelectedBg = navSelectedBackground !== 'auto' ? navSelectedBackground : transparentize(0.9, foreground);
    return css `
    background: ${nestedListColor};
    border-radius: ${detached ? borderRadius : '0px'};
    border-start-start-radius: 0;
    border-start-end-radius: 0;

    ${StyledNavListItem} {
      &:first-child {
        border-block-start: ${spacing} solid transparent;
      }

      &:last-child {
        border-block-end: calc(0.5 * ${spacing}) solid transparent;
      }

      &:not(:last-child) {
        margin-block-end: calc(${spacing} / 2);
      }

      > :first-child {
        &:has(${StyledIcon}) {
          padding-inline-start: calc(((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2));
        }

        &:not(:has(${StyledIcon})) {
          padding-inline-start: calc(
            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconBoxSize}
          );
        }
      }

      ${detached &&
        css `
        [aria-current='page'] {
          background: ${resolvedSelectedBg};

          &:hover,
          &:focus {
            background: ${resolvedSelectedBg};
          }
        }
      `}
    }
  `;
});
StyledNestedNavList.defaultProps = defaultThemeProp;
export const StyledCaseTypes = styled.div(({ theme }) => {
    const { foreground } = navContrastColors(theme);
    return css `
    button {
      ${StyledNavItemIconBox} {
        transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
      }

      &[aria-expanded='false'] ${StyledNavItemIconBox} {
        transform: none;
      }

      &[aria-expanded='true'] ${StyledNavItemIconBox} {
        transform: rotateZ(45deg);
      }
    }

    > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {
      background: ${theme.components['app-shell'].nav['create-button-background']};

      &:hover,
      &:focus {
        background: ${transparentize(0.9, foreground)};
      }
    }
  `;
});
StyledCaseTypes.defaultProps = defaultThemeProp;
export const StyledUtils = styled.div(({ theme }) => {
    return css `
    ${StyledNavList} {
      padding-block-start: calc(${theme.base.spacing} / 2);
    }

    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {
      margin: 0 calc((${navWidth} - ${iconWidth}) / 2);
    }
  `;
});
StyledUtils.defaultProps = defaultThemeProp;
export const StyledMobileMoreMenu = styled(StyledAppNav) `
  width: 100%;
  height: 100dvh;
  padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});
`;
StyledMobileMoreMenu.defaultProps = defaultThemeProp;
export const StyledMobileNav = styled.header(({ theme }) => {
    const { base: { 'hit-area': { 'finger-min': hitAreaFinger }, 'border-radius': borderRadius, 'font-size': fontSize, 'font-scale': fontScale }, components: { button: { 'focus-shadow': focusShadow, 'border-width': borderWidth }, text } } = theme;
    const mobileNavColor = theme.components['app-shell'].nav.background;
    const { foreground } = navContrastColors(theme);
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
    z-index: calc(${theme.base['z-index'].drawer} + 1);
    background: ${mobileNavColor};
    border-radius: calc(2 * ${borderRadius});
    color: ${foreground};
    padding: 0.5rem;
    position: fixed;
    inset-block-start: calc(100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    box-shadow: ${theme.base.shadow.low};

    & + ${StyledDrawer}, & + ${StyledDrawer} ${StyledDrawer} {
      width: 100%;
      padding-block-start: var(--appshell-top-offset, 0);
      padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});
    }

    > div:has(> ${StyledNavList}),
    > div:has(> ${StyledNavList}) > ${StyledNavList}, > ${StyledNavList} {
      display: contents;

      ${StyledNavListItem} {
        padding: 0;
        margin: 0;
        font-size: ${fontSizes[text.secondary['font-size']]};

        ${StyledBareButton}, ${StyledLink} {
          flex-direction: column;
          justify-content: center;
          width: ${rem(menuButtonWidth(theme))};
          height: calc(0.25rem + ${hitAreaFinger});
          border-radius: calc(2 * ${borderRadius});
          border: ${borderWidth} solid transparent;
          padding-block: calc(0.5 * ${theme.base.spacing});

          &::before {
            width: 0;
          }

          span:not(${StyledCountIcon}) {
            width: inherit;
            text-align: center;
            padding-inline: calc(0.5 * ${theme.base.spacing});
          }

          &:enabled:focus,
          &:not([disabled]):focus {
            box-shadow: ${focusShadow};
          }

          ${StyledNavListItemVisualContainer} {
            padding: 0;
            margin: 0;

            ${StyledNavItemIconBox} {
              display: flex;
            }
          }
        }
      }
    }
  `;
});
StyledMobileNav.defaultProps = defaultThemeProp;
export const StyledMobileMoreMenuButton = styled(Button)(({ theme }) => {
    const { base: { 'hit-area': { 'finger-min': hitAreaFinger }, 'border-radius': borderRadius, 'font-size': fontSize, 'font-scale': fontScale }, components: { button: { 'border-width': borderWidth }, text } } = theme;
    const { navOpen } = useContext(AppShellContext);
    const { foreground } = navContrastColors(theme);
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
    flex-direction: column;
    width: ${rem(menuButtonWidth(theme))};
    height: calc(0.25rem + ${hitAreaFinger});
    border-radius: calc(2 * ${borderRadius});
    font-size: ${fontSizes[text.secondary['font-size']]};
    padding-block: calc(0.5 * ${theme.base.spacing});

    span {
      width: inherit;
      padding-inline: calc(0.5 * ${theme.base.spacing});
      ${ellipsisOverflow}
    }

    ${navOpen &&
        css `
      &::before {
        content: '';
        position: absolute;
        inset: calc(${borderWidth} * -1);
        border-radius: inherit;
        background: ${transparentize(0.85, foreground)};
      }
    `}

    ${StyledAlert} {
      position: absolute;
      inset-block-start: calc(0.625rem / 2);
      inset-inline-start: calc(50% + (0.625rem / 2));
    }
  `;
});
StyledMobileMoreMenuButton.defaultProps = defaultThemeProp;
export const StyledLoading = styled.div `
  font-size: 2rem;
`;
export const StyledAppMain = styled.main(({ appHeader, previewActive, headerOffset = 0, $navOrientation = 'side-rail', theme }) => {
    const { navOpen, isMobileNav } = useContext(AppShellContext);
    const isTopBar = $navOrientation === 'top-bar';
    let heightOffset = appHeader ? headerHeight : '0rem';
    if (isMobileNav) {
        heightOffset = mobileHeaderHeight;
    }
    const appBackground = theme.base.palette['app-background'];
    if (isTopBar && !isMobileNav) {
        const totalChromeHeight = `calc(var(--app-header-height, 0px) + ${topNavHeight})`;
        return css `
      --appshell-offset: ${headerOffset}px;
      /* stylelint-disable-next-line length-zero-no-unit */
      --appshell-horizontal-offset: 0rem;
      position: relative;
      margin-inline-start: 0;
      min-height: calc(100dvh - ${totalChromeHeight});
      background: ${appBackground};

      &:focus {
        outline: none;
      }

      & > ${StyledProgressBackdrop} {
        max-height: calc(100dvh - ${totalChromeHeight});
        max-width: 100vw;
        inset-block-start: ${totalChromeHeight};
        inset-inline-start: 0;
        position: fixed;
        transition-property: opacity, max-height, inset-block-start;
        transition-duration: ${theme.base.animation.speed};
        transition-timing-function: ${theme.base.animation.timing.ease};
      }

      @media (min-width: ${theme.base.breakpoints.md}) {
        transition-duration: ${theme.base.animation.speed};
        transition-timing-function: ${theme.base.animation.timing.ease};

        ${previewActive &&
            css `
          transition: none;
          margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
        `}
      }
    `;
    }
    return css `
    --appshell-offset: ${headerOffset}px;
    /* stylelint-disable-next-line length-zero-no-unit */
    --appshell-horizontal-offset: 0rem;

    @media (min-width: ${theme.base.breakpoints.sm}) {
      --appshell-horizontal-offset: calc(
        ${navOpen ? navOpenWidth : navWidth} + var(--safe-area-inset-inline-start, 0rem)
      );
    }
    position: relative;
    margin-inline-start: ${isMobileNav ? 0 : 'var(--appshell-horizontal-offset, 0)'};
    min-height: calc(100dvh - ${heightOffset});
    background: ${appBackground};

    &:focus {
      outline: none;
    }

    ${isMobileNav
        ? css `
          min-height: calc(
            100dvh - var(--appshell-top-offset, 0rem) - var(
                --appshell-bottom-offset,
                ${mobileHeaderHeight}
              )
          );
          /* stylelint-disable-next-line length-zero-no-unit */
          margin-block-start: var(--appshell-top-offset, 0rem);

          &::after {
            content: '';
            display: block;
            height: var(--appshell-bottom-offset, ${mobileHeaderHeight});
          }
        `
        : css `
          transition: margin-inline-start
            ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
          margin-inline-start: calc(
            ${navOpen ? navOpenWidth : navWidth} + var(--safe-area-inset-inline-start, 0rem)
          );
          padding-inline-end: var(--safe-area-inset-inline-end, 0);
        `};

    & > ${StyledProgressBackdrop} {
      max-height: calc(100dvh - ${heightOffset});
      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});
      inset-block-start: ${heightOffset};
      ${!isMobileNav &&
        css `
        inset-inline-start: calc(
          ${navOpen ? navOpenWidth : navWidth} + var(--safe-area-inset-inline-start, 0rem)
        );
      `}
      position: fixed;
      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;
      transition-duration: ${theme.base.animation.speed};
      transition-timing-function: ${theme.base.animation.timing.ease};
    }

    @media (min-width: ${theme.base.breakpoints.md}) {
      transition: margin-inline-end ${!isMobileNav ? ', margin-inline-start' : ''};
      transition-duration: ${theme.base.animation.speed};
      transition-timing-function: ${theme.base.animation.timing.ease};

      ${previewActive &&
        css `
        transition: none;
        margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
      `}
    }
  `;
});
StyledAppMain.defaultProps = defaultThemeProp;
export const StyledBannerRegion = styled.div(({ theme }) => {
    return css `
    padding: calc(2 * ${theme.base.spacing});
  `;
});
StyledBannerRegion.defaultProps = defaultThemeProp;
export const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {
    const bg = theme.components.tooltip['background-color'];
    const color = readableColor(bg);
    return css `
    background-color: ${bg};
    padding: 0;

    header {
      color: ${color};
      border-bottom: none;
    }

    ${StyledMenuItem} {
      background-color: ${bg};
      color: ${color};

      &:hover,
      &:focus {
        background-color: ${bg};
        box-shadow: ${theme.base.shadow.focus};
      }
    }
  `;
});
StyledAppShellTooltip.defaultProps = defaultThemeProp;
export const StyledAppShellToggleButton = styled(Button)(({ theme }) => {
    const { background: navBg, 'foreground-color': navFgColor, 'expand-button': { background: expandBtnBgToken, 'foreground-color': expandBtnFgToken } } = theme.components['app-shell'].nav;
    const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);
    let defaultBg = darken(0.2, backgroundColor);
    if (getContrast(backgroundColor, defaultBg) < 1.3) {
        defaultBg = lighten(0.2, backgroundColor);
    }
    const resolvedBg = expandBtnBgToken !== 'auto' ? expandBtnBgToken : defaultBg;
    const resolvedFg = expandBtnFgToken;
    return css `
    background: ${resolvedBg};
    color: ${resolvedFg};
    border: none;
    margin-block-start: ${theme.base.spacing};

    ${StyledIcon} {
      width: 1.25rem;
      height: 1.25rem;
      font-weight: bold;
    }

    &:enabled:focus,
    :not([disabled]):focus {
      box-shadow: ${theme.base.shadow.focus};
    }
  `;
});
StyledAppShellToggleButton.defaultProps = defaultThemeProp;
export const StyledNavAgentIcon = styled.div `
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  flex-shrink: 0;

  & > svg {
    width: 100%;
    height: 100%;
  }
`;
StyledNavAgentIcon.defaultProps = defaultThemeProp;
export const StyledAIAssistant = styled.div(({ theme }) => {
    const { navOpen } = useContext(AppShellContext);
    const { rtl } = useDirection();
    const { detached } = theme.components['app-shell'].nav;
    const activeBg = theme.components.agent.background;
    const speed = theme.base.animation.speed;
    const ease = theme.base.animation.timing.ease;
    const radius = 'calc(var(--item-height) / 4)';
    const inwardSide = rtl ? '100%' : '0%';
    return css `
    ${detached &&
        css `
      ${StyledNavList} {
        margin-block-start: calc(${theme.base.spacing} / 2);
      }

      ${StyledNavList} > ${StyledNavListItem}:last-of-type {
        padding-block-end: 0;
      }

      ${StyledNavListItem} {
        > :first-child {
          transition:
            border-start-end-radius ${speed} ${ease},
            border-end-end-radius ${speed} ${ease},
            background ${speed} ${ease};
          border-radius: ${radius};
          outline: none;
        }

        &:has([aria-current='page']) {
          z-index: 1;
          padding-inline-end: 0;

          > :first-child {
            background: ${activeBg};
            border-block-color: transparent;
            border-start-end-radius: 0;
            border-end-end-radius: 0;

            &:focus {
              outline: none;
              box-shadow:
                inset ${rtl ? '0.25rem' : '-0.25rem'} 0 0 0 ${activeBg},
                ${theme.base.shadow['focus-inset']};
            }

            &::before {
              content: '';
              position: absolute;
              inset-inline-end: 0;
              bottom: 100%;
              width: ${radius};
              height: ${radius};
              background: ${activeBg};
              pointer-events: none;
              -webkit-mask-image: radial-gradient(
                circle at ${inwardSide} 0%,
                transparent ${radius},
                black ${radius}
              );
              mask-image: radial-gradient(
                circle at ${inwardSide} 0%,
                transparent ${radius},
                black ${radius}
              );
            }

            &::after {
              content: '';
              position: absolute;
              inset-inline-end: 0;
              top: 100%;
              width: ${radius};
              height: ${radius};
              background: ${activeBg};
              pointer-events: none;
              -webkit-mask-image: radial-gradient(
                circle at ${inwardSide} 100%,
                transparent ${radius},
                black ${radius}
              );
              mask-image: radial-gradient(
                circle at ${inwardSide} 100%,
                transparent ${radius},
                black ${radius}
              );
            }
          }

          ${!navOpen &&
            css `
            > :first-child > span:not(${StyledCountIcon}) {
              max-width: 0;
              overflow: hidden;
            }
          `}
        }
      }
    `}
  `;
});
StyledAIAssistant.defaultProps = defaultThemeProp;
export const StyledShareIcon = styled(Icon) `
  transform: rotate(180deg);
`;
StyledShareIcon.defaultProps = defaultThemeProp;
//# sourceMappingURL=AppShell.styles.js.map