{"version":3,"sourceRoot":null,"mappings":"ACKA,6fAcE,yBAAkB,ggBA4BpB,0CAIA,0CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,8CAIA,8CAKA,8CAIA,gDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,oDAIA,sDAKA,6CAIA,6CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,iDAIA,iDAKA,iDAIA,mDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,uDAIA,yDDnPE,kdAiBE,+EAKA,gMAeE,uCAA0C,gKAM1C,0DAA+D,gEAK/D,0DAA+D,qGAM/D,qGAIA,6GAIA,kHAIA,+HAKE,yGAKF,mFASF,wCACE,qHAKE,uIAAA,sIAMA,oIAUF,wIAOA,uFAKA,yHAvHJ,6cAiBE,0EAKA,2LAeE,uCAA0C,2JAM1C,0DAA+D,2DAK/D,0DAA+D,gGAM/D,gGAIA,wGAIA,6GAIA,0HAKE,oGAKF,8EASF,wCACE,gHAKE,kIAAA,iIAMA,+HAUF,mIAOA,kFAKA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/fullwidth-focus.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/../spacing/spacing.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/../spacing/../_custom-media.css"],"sourcesContent":["@import url(\"../spacing/spacing.css\");\n\n.hds-card {\n  &.hds-card--full-width,\n  &.hds-card--focus {\n    /* Basic sizing for fullwidth cards: */\n    --hds-fullwidthcard-min-height: 400px;\n    --hds-fullwidthcard-content-min-height: calc(\n      var(--hds-fullwidthcard-min-height) - 2 * var(--hds-spacing-20-24)\n    );\n    --hds-fullwidthcard-image-aspect-mini: 100 / 155;\n    --hds-fullwidthcard-image-maxheight-small: 420px;\n    --hds-fullwidthcard-image-maxheight-medium: 650px;\n    --hds-fullwidthcard-image-height-small: 300px;\n    --hds-fullwidthcard-image-height-medium: 600px;\n\n    max-width: inherit;\n    container-type: inline-size;\n    container-name: fullwidthcard;\n\n    .hds-card__layoutwrapper {\n      height: 100%;\n      width: 100%;\n    }\n\n    .hds-card__media {\n      overflow: hidden;\n      position: relative;\n      border-radius: var(--hds-border-radius-8);\n      max-height: var(--hds-fullwidthcard-image-maxheight-small);\n      width: 100%;\n\n      /*  Responsivity: different card layouts and content/images sizes, while still displaying as much as the image as\n\t\t\t *  possible and trying to keep focus on the middle, .hds-card__media is displayed in particular ways on\n\t\t\t *  particular viewport widths, but always filling the available width (which below 800px is the full width of the\n\t\t\t *  card minus padding, and above 800px is only half the width of the card):\n\t\t\t *\n\t\t\t **/\n\n      /* Narrowest: fixed aspect ratio (portrait: height is 1.5 times the width). */\n      @container fullwidthcard (width < 300px) {\n        aspect-ratio: var(--hds-fullwidthcard-image-aspect-mini);\n        max-height: var(--hds-fullwidthcard-image-height-small);\n      }\n\n      /* Middle narrow: fixed aspect ratio (quare format), variable height */\n      @container fullwidthcard (width >= 300px) and (width < 648px) {\n        aspect-ratio: 1;\n      }\n\n      /* \"Widest\" of the narrow card layouts: fixed image height (but higher now) */\n      @container fullwidthcard (width >= 648px) and (width < 800px) {\n        height: var(--hds-fullwidthcard-image-height-medium);\n      }\n    }\n\n    .hds-card__body {\n      .hds-card__centerbody {\n        margin: var(--hds-spacing-32-40);\n      }\n\n      .hds-card__body-header {\n        margin-bottom: var(--hds-spacing-20-24);\n      }\n\n      .hds-card__body-description {\n        margin-bottom: var(--hds-spacing-20-24);\n      }\n\n      .hds-card__body-action-row {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--hds-spacing-8);\n\n        .hds-button {\n          white-space: nowrap;\n        }\n      }\n\n      .hds-card__body-action {\n        margin-top: 0;\n      }\n    }\n\n    /*  Wide layout: image to the left or right of the text. Image height is at least 400px high, but scales up if the\n\t\t *  body text is higher. Image has a max height if the text is huge, limiting the aspect ratio of the image.\n\t\t *\n\t\t **/\n    @container fullwidthcard (width >= 800px) {\n      .hds-card__layoutwrapper {\n        display: flex;\n        flex-direction: row;\n        gap: var(--hds-spacing-12-16);\n\n        .hds-card__media,\n        .hds-card__body {\n          flex: 1;\n          min-height: var(--hds-fullwidthcard-content-min-height);\n        }\n\n        .hds-card__media {\n          max-height: var(--hds-fullwidthcard-image-maxheight-medium);\n        }\n      }\n\n      /* Image is absolutely positioned within .hds-card__media, to center and avoid making .hds-card__media outgrow\n\t\t\t * the body text:\n\t\t\t *\n\t\t\t **/\n      /* stylelint-disable selector-class-pattern */\n      .hds-card__media > .hds-card__media__img {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      &.hds-card--image-position-right .hds-card__media {\n        order: 2;\n      }\n\n      /* Body sizes itself based on its content, and centers the contained wrapper (.hds-card__centerbody) vertically: */\n      .hds-card__body {\n        align-self: flex-start;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n    }\n  }\n}\n","@import url(\"../_custom-media.css\");\n\n/**\n * Responsive extension of the spacing css variables\n */\n:root {\n  --hds-spacing-4-8: var(--hds-spacing-4);\n  --hds-spacing-8-12: var(--hds-spacing-8);\n  --hds-spacing-12-16: var(--hds-spacing-12);\n  --hds-spacing-16-20: var(--hds-spacing-16);\n  --hds-spacing-20-24: var(--hds-spacing-20);\n  --hds-spacing-24-32: var(--hds-spacing-24);\n  --hds-spacing-32-40: var(--hds-spacing-32);\n  --hds-spacing-40-48: var(--hds-spacing-40);\n  --hds-spacing-48-64: var(--hds-spacing-48);\n  --hds-spacing-64-80: var(--hds-spacing-64);\n  --hds-spacing-80-120: var(--hds-spacing-80);\n  --hds-spacing-120-160: var(--hds-spacing-120);\n\n  @media (--large) {\n    --hds-spacing-4-8: var(--hds-spacing-8);\n    --hds-spacing-8-12: var(--hds-spacing-12);\n    --hds-spacing-12-16: var(--hds-spacing-16);\n    --hds-spacing-16-20: var(--hds-spacing-20);\n    --hds-spacing-20-24: var(--hds-spacing-24);\n    --hds-spacing-24-32: var(--hds-spacing-32);\n    --hds-spacing-32-40: var(--hds-spacing-40);\n    --hds-spacing-40-48: var(--hds-spacing-48);\n    --hds-spacing-48-64: var(--hds-spacing-64);\n    --hds-spacing-64-80: var(--hds-spacing-80);\n    --hds-spacing-80-120: var(--hds-spacing-120);\n    --hds-spacing-120-160: var(--hds-spacing-160);\n  }\n}\n\n/**\n * Utility classes for margin top and bottom\n * Based upon [tailwind](https://tailwindcss.com/docs/margin)\n * \n * We start of by just adding the margin top and bottom classes.\n * we will see if there becomes a need for left and right. X, Y axis, padding etc...\n *\n * If the consumer wish to primarly use utility classes, the recommended approach is to use tailwind with the\n * provided tailwind configuration file.\n */\n\n/* Margin top */\n.hds-mt-4 {\n  margin-top: var(--hds-spacing-4);\n}\n\n.hds-mt-8 {\n  margin-top: var(--hds-spacing-8);\n}\n\n.hds-mt-12 {\n  margin-top: var(--hds-spacing-12);\n}\n\n.hds-mt-16 {\n  margin-top: var(--hds-spacing-16);\n}\n\n.hds-mt-20 {\n  margin-top: var(--hds-spacing-20);\n}\n\n.hds-mt-24 {\n  margin-top: var(--hds-spacing-24);\n}\n\n.hds-mt-32 {\n  margin-top: var(--hds-spacing-32);\n}\n\n.hds-mt-40 {\n  margin-top: var(--hds-spacing-40);\n}\n\n.hds-mt-48 {\n  margin-top: var(--hds-spacing-48);\n}\n\n.hds-mt-64 {\n  margin-top: var(--hds-spacing-64);\n}\n\n.hds-mt-80 {\n  margin-top: var(--hds-spacing-80);\n}\n\n.hds-mt-120 {\n  margin-top: var(--hds-spacing-120);\n}\n\n.hds-mt-160 {\n  margin-top: var(--hds-spacing-160);\n}\n\n/* Responsive margin top. Mobile first, meaning it jumps up on larger screens */\n.hds-mt-4-8 {\n  margin-top: var(--hds-spacing-4-8);\n}\n\n.hds-mt-8-12 {\n  margin-top: var(--hds-spacing-8-12);\n}\n\n.hds-mt-12-16 {\n  margin-top: var(--hds-spacing-12-16);\n}\n\n.hds-mt-16-20 {\n  margin-top: var(--hds-spacing-16-20);\n}\n\n.hds-mt-20-24 {\n  margin-top: var(--hds-spacing-20-24);\n}\n\n.hds-mt-24-32 {\n  margin-top: var(--hds-spacing-24-32);\n}\n\n.hds-mt-32-40 {\n  margin-top: var(--hds-spacing-32-40);\n}\n\n.hds-mt-40-48 {\n  margin-top: var(--hds-spacing-40-48);\n}\n\n.hds-mt-48-64 {\n  margin-top: var(--hds-spacing-48-64);\n}\n\n.hds-mt-64-80 {\n  margin-top: var(--hds-spacing-64-80);\n}\n\n.hds-mt-80-120 {\n  margin-top: var(--hds-spacing-80-120);\n}\n\n.hds-mt-120-160 {\n  margin-top: var(--hds-spacing-120-160);\n}\n\n/* Margin bottom */\n.hds-mb-4 {\n  margin-bottom: var(--hds-spacing-4);\n}\n\n.hds-mb-8 {\n  margin-bottom: var(--hds-spacing-8);\n}\n\n.hds-mb-12 {\n  margin-bottom: var(--hds-spacing-12);\n}\n\n.hds-mb-16 {\n  margin-bottom: var(--hds-spacing-16);\n}\n\n.hds-mb-20 {\n  margin-bottom: var(--hds-spacing-20);\n}\n\n.hds-mb-24 {\n  margin-bottom: var(--hds-spacing-24);\n}\n\n.hds-mb-32 {\n  margin-bottom: var(--hds-spacing-32);\n}\n\n.hds-mb-40 {\n  margin-bottom: var(--hds-spacing-40);\n}\n\n.hds-mb-48 {\n  margin-bottom: var(--hds-spacing-48);\n}\n\n.hds-mb-64 {\n  margin-bottom: var(--hds-spacing-64);\n}\n\n.hds-mb-80 {\n  margin-bottom: var(--hds-spacing-80);\n}\n\n.hds-mb-120 {\n  margin-bottom: var(--hds-spacing-120);\n}\n\n.hds-mb-160 {\n  margin-bottom: var(--hds-spacing-160);\n}\n\n/* Responsive margin bottom. Mobile first, meaning it jumps up on larger screens */\n.hds-mb-4-8 {\n  margin-bottom: var(--hds-spacing-4-8);\n}\n\n.hds-mb-8-12 {\n  margin-bottom: var(--hds-spacing-8-12);\n}\n\n.hds-mb-12-16 {\n  margin-bottom: var(--hds-spacing-12-16);\n}\n\n.hds-mb-16-20 {\n  margin-bottom: var(--hds-spacing-16-20);\n}\n\n.hds-mb-20-24 {\n  margin-bottom: var(--hds-spacing-20-24);\n}\n\n.hds-mb-24-32 {\n  margin-bottom: var(--hds-spacing-24-32);\n}\n\n.hds-mb-32-40 {\n  margin-bottom: var(--hds-spacing-32-40);\n}\n\n.hds-mb-40-48 {\n  margin-bottom: var(--hds-spacing-40-48);\n}\n\n.hds-mb-48-64 {\n  margin-bottom: var(--hds-spacing-48-64);\n}\n\n.hds-mb-64-80 {\n  margin-bottom: var(--hds-spacing-64-80);\n}\n\n.hds-mb-80-120 {\n  margin-bottom: var(--hds-spacing-80-120);\n}\n\n.hds-mb-120-160 {\n  margin-bottom: var(--hds-spacing-120-160);\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}