import { darken, getContrast, lighten } from 'polished';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { StyledAlert } from '../Badges/Alert';
import { StyledEmptyState } from '../EmptyState';
import { StyledSummaryItem } from '../SummaryItem';
import { StyledText } from '../Text';
import { navContrastColors } from './style-utils';
/* AppShellList styles */
export const StyledAppShellListWrapper = styled.div(({ theme }) => {
    const { border: borderColor } = navContrastColors(theme);
    return css `
    max-height: 100%;
    white-space: nowrap;

    ${StyledSummaryItem} {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: calc(100% - 0.03125rem);
        inset-inline-end: 1rem;
        inset-inline-start: 1rem;
        height: 0.0625rem;
        background-color: ${borderColor};
      }
    }
  `;
});
StyledAppShellListWrapper.defaultProps = defaultThemeProp;
export const StyledAppShellList = styled.ul ``;
StyledAppShellList.defaultProps = defaultThemeProp;
export const StyledAppShellSummaryList = styled.li(({ theme }) => {
    const { hoverBg } = navContrastColors(theme);
    return css `
    ${StyledSummaryItem} {
      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
      color: inherit;
      background-color: transparent;
      border: none;
      text-decoration: none;
      cursor: pointer;
      text-align: start;
      white-space: normal;
      width: 100%;

      &:hover,
      &:focus {
        background-color: ${hoverBg};
      }

      &:focus {
        outline: none;
        box-shadow: ${theme.base.shadow['focus-inset']};
      }
    }
  `;
});
StyledAppShellSummaryList.defaultProps = defaultThemeProp;
export const StyledAppShellMetaList = styled.ul `
  li {
    color: inherit;
  }
`;
export const StyledAppShellPinButton = styled.button(({ theme }) => {
    const { foreground, hoverBg: listHoverBg } = navContrastColors(theme);
    let hoverBg = darken(0.1, listHoverBg);
    if (getContrast(hoverBg, listHoverBg) < 1.3) {
        hoverBg = lighten(0.1, listHoverBg);
    }
    return css `
    color: inherit;
    border: none;
    background-color: transparent;

    &:hover,
    &:focus {
      color: ${foreground};
      background-color: ${hoverBg};
    }

    &:focus {
      outline: none;
      box-shadow: ${theme.base.shadow['focus-inset']};
    }
  `;
});
StyledAppShellPinButton.defaultProps = defaultThemeProp;
export const StyledNotificationVisual = styled.span(({ theme, unread, visualIncluded }) => {
    const { foreground } = navContrastColors(theme);
    return css `
      position: relative;
      ${StyledAlert} {
        display: ${unread ? 'auto' : 'none'};
        position: absolute;
        inset-inline-start: -0.65625rem;
        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};
        background-color: ${foreground};
        height: 0.3125rem;
        width: 0.3125rem;
      }
    `;
});
StyledNotificationVisual.defaultProps = defaultThemeProp;
export const StyledNotificationPrimary = styled.span(({ theme, unread }) => {
    const { foreground } = navContrastColors(theme);
    return css `
    font-weight: ${unread
        ? theme.base['font-weight'].bold
        : theme.base['font-weight']['semi-bold']};
    color: ${foreground};
  `;
});
StyledNotificationPrimary.defaultProps = defaultThemeProp;
export const StyledNotificationSecondary = styled.span(({ theme, unread }) => {
    return css `
      ${StyledText} {
        opacity: ${unread
        ? theme.base.transparency['transparent-1']
        : theme.base.transparency['transparent-3']};
      }
    `;
});
StyledNotificationSecondary.defaultProps = defaultThemeProp;
export const EmptyStateColorContrast = styled.div(({ theme }) => {
    const { foreground } = navContrastColors(theme);
    return css `
    ${StyledEmptyState} {
      span,
      svg {
        color: ${foreground};
      }
    }
  `;
});
EmptyStateColorContrast.defaultProps = defaultThemeProp;
export const StyledAppShellListSection = styled.div(({ theme }) => {
    const { border: borderColor } = navContrastColors(theme);
    return css `
    border-top: 0.0625rem solid ${borderColor};
    min-height: max(20%, 8rem);
    overflow-y: auto;
  `;
});
StyledAppShellListSection.defaultProps = defaultThemeProp;
export const StyledAppShellListHeading = styled.h3(({ theme }) => {
    const { hoverBg, foreground } = navContrastColors(theme);
    return css `
    position: sticky;
    top: 0;
    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
    background-color: ${hoverBg};
    color: ${foreground};
    z-index: 1;
  `;
});
StyledAppShellListHeading.defaultProps = defaultThemeProp;
//# sourceMappingURL=AppShellList.styles.js.map