import { hideVisually, mix, rgba } from 'polished';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { StyledEmptyState } from '../EmptyState';
import Icon, { StyledIcon } from '../Icon';
import { StyledGrid } from '../Grid';
import { tryCatch } from '../../utils';
import { StyledText } from '../Text';
import { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';
import Button from '../Button';
import { readableColor } from '../../styles';
import { StyledPrimary, StyledSecondary, StyledSummaryItem, StyledSummaryItemActions, StyledVisual } from '../SummaryItem';
import { ellipsisOverflow } from '../../styles/mixins';
import { StyledFlex } from '../Flex';
export const StyledExpandButton = styled(Button) `
  align-self: center;
`;
export const StyledCheckMarkIcon = styled(Icon) ``;
export const StyledMenuItem = styled.li(({ theme: { base, components }, isParentItem, itemLayout, mode = 'action', 'aria-selected': isChecked = false, selectableParent = false }) => {
    const activeColor = tryCatch(() => mix(0.85, base.palette['primary-background'], base.palette.interactive));
    const hoverColor = tryCatch(() => mix(0.95, base.palette['primary-background'], base.palette.interactive));
    const hoverCheckColor = tryCatch(() => rgba(components['radio-check'][':checked']['background-color'], base.transparency['transparent-5']));
    const checkedBackground = components['radio-check'][':checked']['background-color'];
    const checkedForeground = tryCatch(() => readableColor(checkedBackground));
    return css `
      min-height: ${base['hit-area']['mouse-min']};
      padding-block: calc(0.75 * ${base.spacing});
      padding-inline: ${base.spacing};
      cursor: pointer;

      ${itemLayout === 'inline' &&
        css `
        justify-content: flex-start;

        ${StyledSummaryItem} {
          /* Sets grid columns based on SummaryItem content combinations */

          &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {
            grid-template-areas: 'visual primary secondary actions';
            grid-template-columns: auto auto 1fr auto;
          }

          &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {
            grid-template-areas: 'visual primary secondary';
            grid-template-columns: auto auto 1fr;
          }

          &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {
            grid-template-areas: 'visual primary actions';
            grid-template-columns: auto 1fr auto;
          }

          &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(
              :has(${StyledSummaryItemActions})
            ) {
            grid-template-areas: 'visual primary';
            grid-template-columns: auto 1fr;
          }

          &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {
            grid-template-areas: 'primary secondary actions';
            grid-template-columns: auto 1fr auto;
          }

          &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(
              :has(${StyledSummaryItemActions})
            ) {
            grid-template-areas: 'primary secondary';
            grid-template-columns: auto 1fr;
          }

          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(
              ${StyledSummaryItemActions}
            ) {
            grid-template-areas: 'primary actions';
            grid-template-columns: auto 1fr;
          }

          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(
              :has(${StyledSummaryItemActions})
            ) {
            grid-template-areas: 'primary';
            grid-template-columns: 1fr;
            flex-grow: 0;
          }

          & > ${StyledPrimary} {
            ${ellipsisOverflow};
          }

          & > ${StyledSecondary} {
            ${ellipsisOverflow};

            ul {
              li {
                ${ellipsisOverflow};
              }
              justify-content: end;
            }
          }

          & > ${StyledSummaryItemActions} > ${StyledFlex} {
            justify-content: end;
          }
        }
      `}

      @media (pointer: coarse) {
        min-height: ${base['hit-area']['finger-min']};
      }

      &:focus-within {
        background-color: ${activeColor};
      }

      &:hover {
        ${StyledCheckMarkIcon} {
          visibility: visible;
          ${mode === 'single-select' &&
        css `
            color: ${isChecked ? checkedBackground : hoverCheckColor};
          `}
          ${mode === 'multi-select' &&
        css `
            ${!isChecked &&
            css `
              border-color: ${components['form-control'][':hover']['border-color']};
            `}
          `}
        }
      }

      &:hover:not([aria-disabled='true']) {
        background-color: ${hoverColor};
      }

      a:first-of-type {
        display: block;
        width: 100%;
        text-decoration: none;
        color: inherit;
      }

      ${isParentItem &&
        !selectableParent &&
        (mode === 'multi-select' || mode === 'single-select') &&
        css `
        padding-inline-start: calc(1.125rem + 2 * ${base.spacing});
      `}

      ${StyledGrid} {
        flex-grow: 1;
      }

      ${StyledCheckMarkIcon} {
        margin-inline-start: 0;
        ${mode === 'single-select' &&
        css `
          ${isChecked
            ? css `
                color: ${checkedBackground};
              `
            : css `
                visibility: hidden;
              `}
        `}
        ${mode === 'multi-select' &&
        css `
          ${isChecked
            ? css `
                color: ${checkedForeground};
                background-color: ${checkedBackground};
                border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};
              `
            : css `
                color: transparent;
                border: 0.0625rem solid ${components['radio-check']['border-color']};
              `}
          border-radius: min(
            calc(${base['border-radius']} * ${components.checkbox['border-radius']}),
            0.25rem
          );
        `}
      }

      &[aria-disabled='true'] {
        background-color: ${components['form-control'][':disabled']['background-color']};
        opacity: ${base['disabled-opacity']};
      }
    `;
});
StyledMenuItem.defaultProps = defaultThemeProp;
export const StyledAncestors = styled.div `
  ${StyledIcon} {
    width: 1em;
    height: 1em;
  }

  & > ${StyledText} {
    ${ellipsisOverflow};
  }
`;
export const StyledVisibilityHidden = styled.p `
  ${hideVisually}
`;
export const StyledSeparator = styled.li(({ theme }) => {
    return css `
    height: 0.0625rem;
    background-color: ${theme.base.palette['border-line']};
    margin: ${theme.base.spacing} 0;
  `;
});
StyledSeparator.defaultProps = defaultThemeProp;
export const StyledMenuGroupHeader = styled.div(({ theme }) => {
    return css `
    min-height: ${theme.base['hit-area']['mouse-min']};
    font-weight: ${theme.base['font-weight']['semi-bold']};
    background-color: ${theme.base.palette['secondary-background']};

    @media (pointer: coarse) {
      min-height: ${theme.base['hit-area']['finger-min']};
    }
  `;
});
StyledMenuGroupHeader.defaultProps = defaultThemeProp;
export const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {
    const hoverColor = tryCatch(() => mix(0.95, base.palette['primary-background'], base.palette.interactive));
    const activeColor = tryCatch(() => mix(0.85, base.palette['primary-background'], base.palette.interactive));
    return css `
    cursor: pointer;
    width: 100%;
    background-color: ${base.palette['primary-background']};

    &:first-child {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    &:last-child {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }

    &:focus-within {
      box-shadow: ${base.shadow['focus-inset']};
      background-color: ${activeColor};
    }

    &:hover:not([aria-disabled='true']):not([data-current='true']) {
      background-color: ${hoverColor};
    }
    color: ${base.palette['foreground-color']};
    padding: calc(0.5 * ${base.spacing}) ${base.spacing};
    text-align: start;
    border-radius: inherit;

    > ${StyledGrid} {
      grid-column-gap: ${base.spacing};
    }

    ${StyledIcon} {
      /* Fixes vertical align issue increasing box size beyond square */
      display: block;
    }
  `;
});
StyledMenuListHeader.defaultProps = defaultThemeProp;
export const StyledMenuList = styled.ul(({ theme }) => css `
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    height: 100%;
    border-radius: inherit;

    ${StyledEmptyState} {
      padding: ${theme.base.spacing};
      height: auto;
    }

    li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {
      margin-block-start: ${theme.base.spacing};
    }
  `);
StyledMenuList.defaultProps = defaultThemeProp;
export const StyledMenuListContainer = styled.fieldset(({ theme }) => {
    return css `
    background-color: ${theme.base.palette['primary-background']};
    border: 0;
    border-radius: inherit;
  `;
});
StyledMenuListContainer.defaultProps = defaultThemeProp;
export const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer) `
  min-width: 10rem;
`;
export const StyledLoadingItem = styled.li `
  display: block;
  position: relative;
  height: 2.8rem;
`;
export const StyledMenuListWrapper = styled.div(({ theme }) => css `
    position: relative;
    overflow: hidden;
    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};

    & > fieldset:first-child {
      position: relative;
    }

    &:first-child {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    &:last-child {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  `);
StyledMenuListWrapper.defaultProps = defaultThemeProp;
export const StyledMenu = styled.div(({ theme }) => {
    const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;
    return css `
    display: flex;
    flex-direction: column;

    &,
    ${StyledMenuListWrapper} {
      max-height: inherit;
    }

    &:focus {
      box-shadow: ${theme.base.shadow.focus};
      outline: none;
    }

    &:first-child {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    &:last-child {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }

    &[data-active-scope='true'] [data-current='true'] {
      box-shadow: ${theme.base.shadow['focus-inset']};
    }

    ${StyledVisuallyHiddenText}:first-child {
      + ${StyledMenuListWrapper}, + header {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
      }
    }

    > header,
    > footer {
      padding: ${theme.base.spacing};
    }

    > header {
      border-bottom: ${borderStyle};
    }

    > footer {
      border-top: ${borderStyle};
    }
  `;
});
StyledMenu.defaultProps = defaultThemeProp;
//# sourceMappingURL=Menu.styles.js.map