import styled, { css } from 'styled-components';
import { transparentize } from 'polished';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize } from '../../styles';
import BareButton, { StyledBareButton } from '../Button/BareButton';
import Flex from '../Flex';
import { StyledNavList, StyledNavListItem, StyledNavItemIconBox, StyledCaseTypes, headerHeight, topNavHeight } from './AppShell.styles';
import { navContrastColors } from './style-utils';
export const StyledTopNav = styled.nav(({ theme }) => {
    const { backgroundColor, foreground, border } = navContrastColors(theme);
    const zBackdrop = theme.base['z-index'].backdrop;
    return css `
    position: sticky;
    inset-block-start: ${headerHeight};
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: ${topNavHeight};
    z-index: calc(${zBackdrop} - 3);
    display: flex;
    align-items: center;
    gap: ${theme.base.spacing};
    padding-inline: calc(${theme.base.spacing} * 2);
    background: ${backgroundColor};
    color: ${foreground};
    border-block-end: 0.0625rem solid ${border ?? transparentize(0.8, foreground)};
  `;
});
StyledTopNav.defaultProps = defaultThemeProp;
export const StyledTopNavSection = styled(Flex) `
  overflow: hidden;
`;
StyledTopNavSection.defaultProps = defaultThemeProp;
export const StyledTopNavList = styled(Flex) `
  overflow: hidden;
  position: relative;
`;
StyledTopNavList.defaultProps = defaultThemeProp;
export const StyledTopNavUtilBar = styled(Flex) `
  margin-inline-start: auto;
`;
StyledTopNavUtilBar.defaultProps = defaultThemeProp;
export const StyledTopNavItem = styled(BareButton)(({ theme, $active }) => {
    const { foreground } = navContrastColors(theme);
    const hoverBg = transparentize(0.9, foreground);
    const activeBg = transparentize(0.85, foreground);
    return css `
    background: ${$active ? activeBg : 'transparent'};
    display: inline-flex;
    align-items: center;
    min-height: ${theme.base['hit-area'].mouse};
    gap: ${theme.base.spacing};
    padding: 0 calc(${theme.base.spacing} * 1.5);
    border-radius: ${theme.components['app-shell'].nav['item-border-radius']};
    font: inherit;
    white-space: nowrap;
    text-decoration: none;

    & + & {
      margin-inline-start: 0;
    }

    &:hover {
      background: ${hoverBg};
    }

    &:focus-visible {
      background: ${hoverBg};
      box-shadow: ${theme.base.shadow['focus-inset']};
    }
  `;
});
StyledTopNavItem.defaultProps = defaultThemeProp;
export const StyledTopNavUtilButton = styled(BareButton)(({ theme }) => {
    const { foreground } = navContrastColors(theme);
    const hoverBg = transparentize(0.9, foreground);
    return css `
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: ${theme.base['hit-area'].mouse};
    height: ${theme.base['hit-area'].mouse};
    border-radius: ${theme.base['border-radius']};

    & + & {
      margin-inline-start: 0;
    }

    &:hover {
      background: ${hoverBg};
    }

    &:focus-visible {
      background: ${hoverBg};
      box-shadow: ${theme.base.shadow['focus-inset']};
    }
  `;
});
StyledTopNavUtilButton.defaultProps = defaultThemeProp;
export const StyledTopNavCountBadge = styled.span(({ theme }) => {
    const { urgent } = navContrastColors(theme);
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    position: absolute;
    inset-block-start: 0.125rem;
    inset-inline-end: 0.125rem;
    background: ${urgent};
    color: ${theme.base.palette['primary-background']};
    border-radius: calc(9999 * ${theme.base['border-radius']});
    min-width: 1rem;
    height: 1rem;
    padding-inline: calc(${theme.base.spacing} / 2);
    font-size: ${fontSize.xxs};
    line-height: 1rem;
    text-align: center;
  `;
});
StyledTopNavCountBadge.defaultProps = defaultThemeProp;
/**
 * Hosts the side-rail `CaseTypes` component inline in the top bar.
 * - Strips side-rail width/margin constraints so the button sits inline.
 * - Hides the "Create" text label visually (kept in aria-label for a11y).
 * - Makes the button square so it aligns with the nav item hit area.
 */
export const StyledTopNavCreateArea = styled(Flex)(({ theme }) => {
    const hitArea = theme.base['hit-area'].mouse;
    const borderRadius = theme.base['border-radius'];
    return css `
    ${StyledNavList} {
      min-width: unset;
    }

    ${StyledNavListItem} {
      padding-block-end: 0 !important;

      &:not(:last-child),
      &:only-child {
        margin-block-end: 0 !important;
      }
    }

    /* Make the top-level create button square and icon-only */
    ${StyledCaseTypes} > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {
      width: ${hitArea};
      height: ${hitArea};
      min-height: ${hitArea};
      padding: 0;
      justify-content: center;
      border-radius: ${borderRadius};

      /* Hide the "Create" text label visually; aria-label on the button covers a11y.
         Target all spans except the icon box so SVG icon remains visible. */
      span:not(${StyledNavItemIconBox}) {
        display: none;
      }
    }
  `;
});
StyledTopNavCreateArea.defaultProps = defaultThemeProp;
/**
 * Invisible container used as the hidden measurement row in AppTopNav.
 * Always rendered at absolute position so useTopNavOverflow can measure all
 * link widths at full size before deciding which ones are visible.
 */
export const StyledTopNavMeasureRow = styled(Flex) `
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  inset-block-start: 0;
  inset-inline-start: 0;
`;
StyledTopNavMeasureRow.defaultProps = defaultThemeProp;
/**
 * Always rendered at absolute position so the hook can measure the More button
 * width before deciding how many links fit.
 */
export const StyledTopNavItemHidden = styled(StyledTopNavItem) `
  position: absolute;
  visibility: hidden;
  pointer-events: none;
`;
StyledTopNavItemHidden.defaultProps = defaultThemeProp;
//# sourceMappingURL=AppTopNav.styles.js.map