{"version":3,"file":"376568e9-2927e97f2254ca130fb6.js","mappings":"4XAQO,sQA0CMA,GAAmB,mCAQ5B,gBAlDmC,EAkDhCC,EAAH,iBAAmBC,EAAnB,gBAAkCC,EAAlC,2BAlDmC,EAmDX,CAAEF,eAAF,EAAkBC,cAAlB,EAAiCC,kBADzD,IA9CEC,EAAAA,EAAAA,IAJkC,meAepCC,EAAAA,gBAAAA,0cASmCC,EAAAA,EAAAA,IAAK,SATxCD,SAAAA,oDAU2CC,EAAAA,EAAAA,IAAK,QAVhDD,SAfmC,YA4BnCA,EAAAA,gBACFA,EADEA,mBA5BmC,2IAmCnCA,EAAAA,gBACFA,EADEA,eAnCmC,uEA0CV,6GAazB,qGAbyB,OAmBzBE,EAAAA,GAAAA,cAnByB,+FAuBzB,mBACAC,EAAAA,mBACAJ,EAAAA,EAAAA,IADAI,iFAGiCF,EAAAA,EAAAA,IAAK,SAHtCE,SAAAA,uDAAAA,GAAAA,GAAAA,GAxByB,QA+BzB,mBACAA,EAAAA,qBADA,CA/ByB,QAAtB,qJAiDMC,GAAuB,aAClCC,kBAAmB,mBAAgB,CAAC,mBAAmB,kBAApB,qBAAhB,EADe,wBAGhC,YAAGC,IAAAA,EAAkD,EAAlDA,iBAAkBC,EAAgC,EAAhCA,gBACrB,OADqD,EAAfC,SAE7B,EAMT,EACSN,EAAAA,GAAAA,QAAP,2DAIKA,EAAAA,GAAAA,QAAP,oDAEIK,EAAe,wCAFnB,4CAhB6B,QAyB7B,uCAzB6B,QAgCpBE,GAAY,kCACrBP,EAAAA,GAAAA,OADkB,yFAIlBA,EAAAA,GAAAA,MAJkB,wIAUTQ,GAAW,iCAAH,mIAKRC,GAA+B,kCAAH,mDAOrCT,EAAAA,GAAAA,OAPqC,6HAYrCA,EAAAA,GAAAA,QAZqC,+G","sources":["webpack://@dnb-web-static-apps/sbanken/../../../libs/dce-openpages/components/src/sections/PageTitle/styles.ts"],"sourcesContent":["import styled from '@emotion/styled'\nimport { calc } from '@dnb/eufemia/components/space/SpacingUtils'\nimport { media } from '@dnb-shared-libs/responsive'\nimport { Paragraph } from '@dnb/eufemia/elements'\nimport { GridContent, Section } from '../../components/Grid'\nimport { css } from '@emotion/react'\nimport { Heading } from '@dnb/eufemia/components'\n\nexport const titlePageThemeVariables = (p: {\n  isSbankenTheme?: boolean\n  isSbankenInfo?: boolean\n  isSbankenCategory?: boolean\n}) => css`\n  --page-title-description-font-size: var(--font-size-large);\n  --page-title-description-line-height: var(--line-height-medium);\n  --page-title-header-font-size-tablet: var(--font-size-x-large);\n  --page-title-header-line-height-mobile: var(--line-height-large);\n  --page-title-default-grid-column: 2 / span 7;\n  --page-title-header-only-grid-column: 2 / span 7;\n  --page-title-text-align: unset;\n  --page-title-top-spacing-mobile: var(--spacing-small);\n  --page-title-top-spacing-tablet-desktop: var(--spacing-medium);\n\n  ${p.isSbankenTheme &&\n  `\n    --page-title-description-font-size: var(--font-size-lead);\n    --page-title-description-line-height: var(--line-height-lead);\n    --page-title-header-font-size-tablet: var(--font-size-xx-large);\n    --page-title-header-line-height-mobile: var(--line-height-x-large);\n    --page-title-default-grid-column: 1 / span 8;\n    --page-title-header-only-grid-column: 1 / -1;\n    --page-title-text-align: center;\n    --page-title-top-spacing-mobile: ${calc('medium', 'small')};\n    --page-title-top-spacing-tablet-desktop: ${calc('large', 'large')};\n  `};\n\n  ${p.isSbankenTheme &&\n  p.isSbankenCategory &&\n  `\n    --page-title-top-spacing-mobile: var(--spacing-small);\n    --page-title-top-spacing-tablet-desktop: var(--spacing-large);\n  `}\n\n  ${p.isSbankenTheme &&\n  p.isSbankenInfo &&\n  `\n    --page-title-default-grid-column: 3 / span 8;\n  `};\n`\n\nexport const PageTitleSection = styled(Section)<{\n  withIllustration?: boolean\n  withGreenBackground?: boolean\n  isSbankenTheme?: boolean\n  isSbankenInfo?: boolean\n  isSbankenCategory?: boolean\n  centered?: boolean\n}>`\n  ${({ isSbankenTheme, isSbankenInfo, isSbankenCategory }) =>\n    titlePageThemeVariables({ isSbankenTheme, isSbankenInfo, isSbankenCategory })}\n\n  padding-top: var(--page-title-top-spacing-mobile);\n  --section-margin-desktop: 0 0 var(--spacing-x-large);\n  ${({ isSbankenTheme }) =>\n    isSbankenTheme &&\n    `\n    --section-margin-tablet: 0 0 var(--spacing-x-large);\n  `}\n\n  ${media.tabletDesktop`\n    padding-top: var(--page-title-top-spacing-tablet-desktop);\n  `}\n\n  ${(props) =>\n    props.withIllustration &&\n    css`\n      --section-margin-mobile: 0 0 var(--spacing-large);\n      --section-margin-tablet: 0 0 ${calc('medium', 'small')};\n      --section-margin-desktop: 0 0 var(--spacing-medium);\n    `}\n\n  ${(props) =>\n    props.withGreenBackground &&\n    css`\n      position: relative;\n      color: var(--color-white);\n      background-color: var(--color-ocean-green);\n      &:after {\n        content: '';\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        padding: var(--section-margin-tablet);\n        background-color: var(--color-ocean-green);\n      }\n    `}\n`\n\nexport const PageTitleGridContent = styled(GridContent, {\n  shouldForwardProp: (p: string) => !['withIllustration', 'withDescription', 'centered'].includes(p)\n})<{ withIllustration?: boolean; withDescription?: boolean; centered?: boolean }>`\n  ${({ withIllustration, withDescription, centered }) => {\n    if (centered) {\n      return css`\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n      `\n    }\n    if (withIllustration) {\n      return media.desktop`\n        grid-column: 2 / 7;\n      `\n    }\n    return media.desktop`\n      grid-column: ${\n        withDescription\n          ? 'var(--page-title-default-grid-column)'\n          : 'var(--page-title-header-only-grid-column)'\n      };\n    `\n  }};\n\n  ${({ withDescription }) =>\n    !withDescription &&\n    css`\n      text-align: var(--page-title-text-align);\n    `};\n`\n\nexport const HeroTitle = styled(Heading)`\n  ${media.tablet`\n    font-size: var(--page-title-header-font-size-tablet);\n  `}\n  ${media.phone`\n    font-size: var(--font-size-x-large);\n    line-height: var(--page-title-header-line-height-mobile);\n  `}\n`\n\nexport const HeroText = styled(Paragraph)`\n  font-size: var(--page-title-description-font-size);\n  line-height: var(--page-title-description-line-height);\n`\n\nexport const PageTitleIllustrationContent = styled(GridContent)`\n  margin-top: var(--spacing-large);\n\n  img {\n    width: 100%;\n  }\n\n  ${media.tablet`\n    grid-column: 2 / 6;\n    margin-top: calc(var(--spacing-large) + var(--spacing-x-small));\n  `}\n\n  ${media.desktop`\n      margin-top: calc(var(--spacing-medium) * -1);\n      grid-column: 8 / 12;\n  `}\n`\n"],"names":["PageTitleSection","isSbankenTheme","isSbankenInfo","isSbankenCategory","css","p","calc","media","props","PageTitleGridContent","shouldForwardProp","withIllustration","withDescription","centered","HeroTitle","HeroText","PageTitleIllustrationContent"],"sourceRoot":""}