import styled, { css } from 'styled-components';
import { calculateFontSize } from '../../styles';
import { defaultThemeProp } from '../../theme';
import { StyledMetaListItem } from '../MetaList/MetaList';
import { StyledLabel } from '../Label';
import { StyledForm } from '../MultiStepForm/MultiStepForm';
import { navOpenWidth } from './AppShell.styles';
import { navContrastColors, pxToRem } from './style-utils';
export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
    const { components: { 'app-shell': { nav: { background: navBg } } } } = theme;
    const { foreground, border: borderColor } = navContrastColors(theme);
    return css `
    background: ${navBg};
    width: ${navOpenWidth};
    height: 100%;
    color: ${foreground};
    opacity: ${open ? 1 : 0};
    border-inline-end: ${pxToRem(1)} solid ${borderColor};

    ${StyledForm},
    ${StyledLabel},
    ${StyledMetaListItem} {
      color: ${foreground};
    }
  `;
});
StyledDrawerWrapper.defaultProps = defaultThemeProp;
export const StyledDrawerHeading = styled.header(({ theme }) => {
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    const { foreground } = navContrastColors(theme);
    return css `
    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
    line-height: 1;

    h2 {
      font-size: ${fontSize.s};
      font-weight: ${theme.base['font-weight']['semi-bold']};
      margin: 0 auto;
      position: relative;
      left: -0.7rem;
    }

    svg {
      font-size: ${fontSize.xxl};
      cursor: pointer;
      color: ${foreground};
    }
  `;
});
StyledDrawerHeading.defaultProps = defaultThemeProp;
export const StyledDrawerBackButton = styled.button(({ theme }) => {
    const { hoverBg, foreground } = navContrastColors(theme);
    return css `
    height: ${theme.base['hit-area']['mouse-min']};
    width: ${theme.base['hit-area']['mouse-min']};
    border-radius: calc(
      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}
    );

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

    &:focus {
      outline: none;
      box-shadow: ${theme.base.shadow['focus-inset']};
    }
  `;
});
StyledDrawerBackButton.defaultProps = defaultThemeProp;
export const StyledDrawerList = styled.ul(() => {
    return css ``;
});
StyledDrawerList.defaultProps = defaultThemeProp;
export const StyledDrawerMetaList = styled.ul `
  li {
    color: inherit;
  }
`;
export const EmptyDrawerVisual = styled.div(({ theme }) => {
    return css `
    width: calc(4 * ${theme.base.spacing});
    height: calc(4 * ${theme.base.spacing});
  `;
});
EmptyDrawerVisual.defaultProps = defaultThemeProp;
export const StyledDrawerListHeading = 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;
  `;
});
StyledDrawerListHeading.defaultProps = defaultThemeProp;
export const StyledDrawerViewAll = styled.a(({ theme }) => {
    const { foreground, nestedListHeader } = navContrastColors(theme);
    return css `
    position: sticky;
    bottom: 0;
    padding: ${theme.base.spacing} 0;
    color: ${foreground};
    background: ${nestedListHeader};
    text-align: center;
    margin-top: 0.0625rem;

    &:focus {
      outline: none;
      box-shadow: ${theme.base.shadow['focus-inset']};
    }
  `;
});
StyledDrawerViewAll.defaultProps = defaultThemeProp;
export const StyledDrawerListSection = styled.div(({ theme }) => {
    const { border: borderColor } = navContrastColors(theme);
    return css `
    border-top: 0.0625rem solid ${borderColor};
    min-height: max(20%, 8rem);
    overflow-y: auto;
  `;
});
StyledDrawerListSection.defaultProps = defaultThemeProp;
export const StyledDrawerListContainer = styled.div(({ theme }) => {
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});
    overflow: auto;
  `;
});
StyledDrawerListContainer.defaultProps = defaultThemeProp;
//# sourceMappingURL=Drawer.styles.js.map