import styled, { css, createGlobalStyle } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';
/**
 * Promotes --marking-height to :root so portaled elements
 * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.
 */
export const ClassificationMarkingGlobalStyle = createGlobalStyle `
  :root {
    --marking-height: ${({ height }) => height};
  }
`;
export const StyledMarking = styled.div(({ background, color, height, fontSize, fontFamily, placement, theme }) => {
    return css `
    position: fixed;
    ${placement}: 0;
    inset-inline: 0;
    height: ${height};
    line-height: ${height};
    text-align: center;
    font-weight: ${theme.base['font-weight'].bold};
    ${fontFamily ? `font-family: ${fontFamily};` : ''}
    ${fontSize ? `font-size: ${fontSize};` : ''}
    z-index: ${theme.base['z-index'].max};
    background: ${background};
    color: ${color};
  `;
});
StyledMarking.defaultProps = defaultThemeProp;
export const StyledClassifiedContent = styled.div(({ height, theme }) => {
    return css `
    --marking-height: ${height};
    --top-offset: calc(${headerHeight} + var(--marking-height));
    --remaining-height: calc(100vh - (${headerHeight} + (var(--marking-height) * 2)));
    height: calc(100% - var(--marking-height));
    min-height: calc(100% - var(--marking-height));

    /* Header layout fix: position below top banner */
    & > header:not(${StyledMobileNav}) {
      position: fixed;
      top: var(--marking-height);
      width: 100%;
    }

    /* Desktop only: nav and main top offset and min-height */
    @media (width > ${theme.base.breakpoints.sm}) {
      & nav[data-app-region],
      & nav[data-app-region] [role='dialog'],
      & main[data-app-region] {
        top: var(--top-offset);
        min-height: var(--remaining-height);
      }

      /* Nav height */
      & nav[data-app-region] {
        height: var(--remaining-height);
      }

      & main[data-app-region] {
        padding-block-end: var(--marking-height);
      }
    }
  `;
});
StyledClassifiedContent.defaultProps = defaultThemeProp;
//# sourceMappingURL=ClassificationMarking.styles.js.map