import styled, { css } from 'styled-components';
import Text from '../Text';
import Button from '../Button';
import { StyledTab } from '../Tabs/Tab';
import { calculateFontSize, getHoverColors, readableColor } from '../../styles';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
export const StyledSkipNavigation = styled(Button)(({ theme }) => {
    const { base: { palette: { 'primary-background': primaryBackground }, spacing } } = theme;
    return css `
    position: absolute;
    top: ${spacing};
    left: -200vw;
    background-color: ${primaryBackground};
    padding: calc(2 * ${spacing});

    &:focus,
    &:active {
      left: ${spacing};
    }
  `;
});
StyledSkipNavigation.defaultProps = defaultThemeProp;
export const StyledNavItem = styled(StyledTab)(({ theme }) => {
    const { base: { breakpoints, palette: { interactive, 'app-background': hoverBase }, spacing } } = theme;
    const hoverColors = getHoverColors(hoverBase);
    return css `
    height: auto;

    a,
    button {
      display: block;
      width: 100%;
      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});
    }

    &[aria-current='page'] {
      a {
        color: ${interactive};
      }

      &::after {
        background: ${interactive};
      }
    }

    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      a,
      button {
        text-transform: uppercase;
        padding: calc(1.5 * ${spacing}) 0;

        &:hover {
          text-decoration: none;
        }
      }
    }

    /* md or above / "Desktop" */
    @media all and (min-width: ${breakpoints.md}) {
      padding-left: 0;
      padding-right: 0;
      border: none;

      &::after {
        content: none;
      }

      a,
      button {
        &:hover,
        &:focus {
          background: ${hoverColors.background};
          color: ${hoverColors.foreground};
          text-decoration: none;
        }
      }
    }
  `;
});
StyledNavItem.defaultProps = defaultThemeProp;
export const StyledNavGroupHeader = styled(Text)(({ theme }) => {
    const { base: { spacing, breakpoints } } = theme;
    return css `
    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});

    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      display: none;
    }
  `;
});
StyledNavGroupHeader.defaultProps = defaultThemeProp;
export const StyledNavGroupList = styled.ul ``;
export const StyledNavGroup = styled.div(({ theme }) => {
    const { base: { breakpoints, spacing } } = theme;
    return css `
    margin: calc(2 * ${spacing}) 0;

    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      margin: 0;
    }
  `;
});
StyledNavGroup.defaultProps = defaultThemeProp;
export const StyledNavList = styled.ul(({ theme }) => {
    const { base: { breakpoints } } = theme;
    return css `
    &&,
    li {
      list-style-type: none;
    }

    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      white-space: nowrap;

      li,
      > div {
        display: inline-block;
      }
    }

    > ${StyledNavGroup}:first-child {
      margin-top: 0;
    }
  `;
});
StyledNavList.defaultProps = defaultThemeProp;
export const StyledNav = styled.nav ``;
export const StyledCategoryIconBlock = styled.div(({ theme }) => {
    const { base: { palette: { 'brand-primary': brandPrimary }, 'border-radius': baseBorderRadius, spacing } } = theme;
    const color = tryCatch(() => readableColor(brandPrimary));
    return css `
    background: ${brandPrimary};
    width: 2rem;
    height: 2rem;
    margin-inline-end: ${spacing};
    border-radius: calc(0.5 * ${baseBorderRadius});

    svg {
      color: ${color};
    }
  `;
});
StyledCategoryIconBlock.defaultProps = defaultThemeProp;
export const StyledCategoryHeadingRow = styled.div(({ theme }) => {
    const { base: { breakpoints, spacing } } = theme;
    return css `
    padding: 0 calc(2 * ${spacing});
    margin-bottom: calc(2 * ${spacing});

    h1:focus-visible {
      outline: transparent;
      box-shadow: ${theme.base.shadow.focus};
    }

    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      margin-bottom: ${spacing};
    }
  `;
});
StyledCategoryHeadingRow.defaultProps = defaultThemeProp;
export const StyledMenuColumn = styled.div(({ theme }) => {
    const { base: { palette: { 'app-background': appBackground }, breakpoints, spacing } } = theme;
    return css `
    background-color: ${appBackground};
    position: sticky;
    top: 0;
    overflow-y: auto;
    max-height: 100%;
    width: 100%;
    padding: calc(2 * ${spacing}) 0;

    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      position: static;
      padding-bottom: 0;
    }

    /* md or above */
    @media all and (min-width: ${breakpoints.md}) {
      max-width: 14.438rem;
    }

    /* lg or above */
    @media all and (min-width: ${breakpoints.lg}) {
      max-width: 17.563rem;
    }

    /* xl or above */
    @media all and (min-width: ${breakpoints.xl}) {
      max-width: 20.75rem;
    }
  `;
});
StyledMenuColumn.defaultProps = defaultThemeProp;
export const StyledPageTitle = styled.h2(({ theme }) => {
    const { base: { 'font-weight': { 'semi-bold': fontWeight }, 'font-size': fontSize, 'font-scale': fontScale } } = theme;
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
    font-size: ${fontSizes['m']};
    font-weight: ${fontWeight};
  `;
});
StyledPageTitle.defaultProps = defaultThemeProp;
export const StyledPageActionCol = styled.div ``;
export const StyledArticleHeader = styled.header(({ theme }) => {
    const { base: { palette: { 'primary-background': primaryBackground }, spacing } } = theme;
    return css `
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: ${primaryBackground};
    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});
  `;
});
StyledArticleHeader.defaultProps = defaultThemeProp;
export const StyledPageArticle = styled.article(({ theme }) => {
    const { base: { breakpoints, palette: { 'primary-background': primaryBackground }, spacing } } = theme;
    return css `
    position: relative;
    background-color: ${primaryBackground};
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});

    &:focus {
      outline: none;
    }

    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});
    }
  `;
});
StyledPageArticle.defaultProps = defaultThemeProp;
export const StyledTemplateRow = styled.div(({ theme }) => {
    const { base: { breakpoints } } = theme;
    return css `
    position: relative;
    height: 100%;

    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
      flex-direction: column;
      height: auto;
    }
  `;
});
StyledTemplateRow.defaultProps = defaultThemeProp;
export const StyledTemplate = styled.div `
  height: 0;
  min-height: inherit;
`;
//# sourceMappingURL=CategorySubPage.styles.js.map