import styled, { css } from 'styled-components';
import { rem } from 'polished';
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 } from './style-utils';
export const StyledDrawerWrapper = styled.div(({ theme, open, topOffset }) => {
    const { components: { 'app-shell': { nav: { background: navBg } } } } = theme;
    const { foreground, border: borderColor } = navContrastColors(theme);
    return css `
      display: flex;
      flex-direction: column;
      background: ${navBg};
      width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));
      height: unset;
      inset-block: ${topOffset} 0;
      color: ${foreground};
      opacity: ${open ? 1 : 0};
      border-inline-end: ${rem(1)} solid ${borderColor};

      ${StyledForm},
      ${StyledLabel},
    ${StyledMetaListItem} {
        color: ${foreground};
      }
    `;
});
StyledDrawerWrapper.defaultProps = defaultThemeProp;
/**
 * Fixed-position container that offsets the drawer below the top chrome
 * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
 * The inner Drawer uses position='absolute' relative to this container.
 * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit
 * rounding issues and ensuring the drawer always fills the available height.
 */
export const StyledTopNavDrawerOffset = styled.div(({ $topOffset, theme }) => css `
    position: fixed;
    inset-block-start: ${$topOffset};
    inset-inline-start: 0;
    inset-block-end: 0;
    width: ${navOpenWidth};
    z-index: ${theme.base['z-index'].drawer};
  `);
StyledTopNavDrawerOffset.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 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);
  `;
});
StyledDrawerListSection.defaultProps = defaultThemeProp;
export const StyledDrawerListContainer = styled.div(() => {
    return css `
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  `;
});
StyledDrawerListContainer.defaultProps = defaultThemeProp;
//# sourceMappingURL=Drawer.styles.js.map