@postenbring/hedwig-css/dist/flex.css.map

Styles for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

{"version":3,"sourceRoot":null,"mappings":"AAIE,+CAGE,6BACE,0CAON,6BACE,qEAIA,sEAIA,wEAKF,yBACE,uBAGE,qEAKE,yCAON,kDAIA,qEAIA,sEAIA,uEAIA,qEAIA,0GAOE,qIAQF,gHAIE,iDAIA,sEAAA,wEAMF,6HAIE,4JAMA,yEAAA,2EAMF,6HAIE,4JAMA,yEAAA,2EAMF,gIAIE,mDAIA,yEAAA,2EAMF,uHAIE,oDAIA,0EAAA,4EAOF,mLAMA,mMAMA,0LAMA,gMAKE,gMAOF,oMAKE,4LAQF,qLAMA,qMAMA,4LAMA,kMAKE,iMAOF,sMAKE,6LAQF,sLAMA,sMAMA,6LAMA,mMAKE,kMAOF,uMAKE,8LAQF,uLAMA,uMAMA,8LAMA,oMAKE,mMAOF,wMAKE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/flex/flex.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/flex/../../_custom-media.css"],"sourcesContent":["@import url(\"../../_custom-media.css\");\n\n/* stylelint-disable length-zero-no-unit */\n.hds-flex {\n  & > * {\n    margin-bottom: var(--hds-spacing-4);\n\n    @media (--before-large) {\n      &:last-of-type {\n        margin-bottom: 0;\n      }\n    }\n  }\n}\n\n@media (--before-large) {\n  .hds-flex--gutter-large-mobile > * {\n    margin-bottom: var(--hds-spacing-16);\n  }\n\n  .hds-flex--gutter-larger-mobile > * {\n    margin-bottom: var(--hds-spacing-24);\n  }\n\n  .hds-flex--gutter-largest-mobile > * {\n    margin-bottom: var(--hds-spacing-40);\n  }\n}\n\n@media (--large) {\n  .hds-flex {\n    display: flex;\n\n    & > * {\n      flex: 1;\n      margin-right: var(--hds-spacing-4);\n      margin-bottom: 0;\n\n      &:last-of-type {\n        margin-right: 0;\n      }\n    }\n  }\n}\n\n.hds-flex--variable-height {\n  align-items: flex-start;\n}\n\n.hds-flex--gutter-large-desktop > * {\n  margin-right: var(--hds-spacing-16);\n}\n\n.hds-flex--gutter-larger-desktop > * {\n  margin-right: var(--hds-spacing-24);\n}\n\n.hds-flex--gutter-largest-desktop > * {\n  margin-right: var(--hds-spacing-40);\n}\n\n.hds-flex--gutter-medium-desktop > * {\n  margin-right: var(--hds-spacing-8);\n}\n\n.hds-flex--twos,\n.hds-flex--thirds,\n.hds-flex--fourths,\n.hds-flex--two-one,\n.hds-flex--one-two {\n  flex-wrap: wrap;\n\n  & > * {\n    margin-bottom: var(--hds-spacing-4);\n  }\n}\n\n/* Calculation on the widths follows this logic:\n        Percentage of width minus (margins between items divided by number of items)\n    */\n.hds-flex--twos > * {\n  min-width: calc(50% - (var(--hds-spacing-4) / 2)); /* 3 / 2 = 1.5 */\n  max-width: calc(50% - (var(--hds-spacing-4) / 2));\n\n  &:nth-of-type(2n) {\n    margin-right: 0;\n  }\n\n  &:nth-child(2n + 1):nth-last-child(-n + 2),\n  &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n    margin-bottom: 0px;\n  }\n}\n\n.hds-flex--two-one > * {\n  min-width: calc((200% / 3) - (var(--hds-spacing-4) / 2)); /* 3 / 2 = 1.5 */\n  max-width: calc((200% / 3) - (var(--hds-spacing-4) / 2));\n\n  &:nth-of-type(2n) {\n    min-width: calc((100% / 3) - (var(--hds-spacing-4) / 2)); /* 3 / 2 = 1.5 */\n    max-width: calc((100% / 3) - (var(--hds-spacing-4) / 2));\n    margin-right: 0;\n  }\n\n  &:nth-child(2n + 1):nth-last-child(-n + 2),\n  &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n    margin-bottom: 0px;\n  }\n}\n\n.hds-flex--one-two > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-4) / 2)); /* 3 / 2 = 1.5 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-4) / 2));\n\n  &:nth-of-type(2n) {\n    min-width: calc((200% / 3) - (var(--hds-spacing-4) / 2)); /* 3 / 2 = 1.5 */\n    max-width: calc((200% / 3) - (var(--hds-spacing-4) / 2));\n    margin-right: 0;\n  }\n\n  &:nth-child(2n + 1):nth-last-child(-n + 2),\n  &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n    margin-bottom: 0px;\n  }\n}\n\n.hds-flex--thirds > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-4) * 2 / 3)); /* 3 * 2 / 3 = 2 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-4) * 2 / 3));\n\n  &:nth-of-type(3n) {\n    margin-right: 0;\n  }\n\n  &:nth-child(3n + 1):nth-last-child(-n + 3),\n  &:nth-child(3n + 1):nth-last-child(-n + 3) ~ * {\n    margin-bottom: 0px;\n  }\n}\n\n.hds-flex--fourths > * {\n  min-width: calc(25% - (var(--hds-spacing-4) * 3 / 4)); /* 3 * 3 / 4 = 2.25 */\n  max-width: calc(25% - (var(--hds-spacing-4) * 3 / 4));\n\n  &:nth-of-type(4n) {\n    margin-right: 0;\n  }\n\n  &:nth-child(4n + 1):nth-last-child(-n + 4),\n  &:nth-child(4n + 1):nth-last-child(-n + 4) ~ * {\n    margin-bottom: 0px;\n  }\n}\n\n/* Medium gutter desktop calculations */\n.hds-flex--gutter-medium-desktop.hds-flex--twos > * {\n  min-width: calc(50% - (var(--hds-spacing-8) / 2)); /* 18 / 2 = 9 */\n  max-width: calc(50% - (var(--hds-spacing-8) / 2));\n  margin-bottom: var(--hds-spacing-8);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--thirds > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-8) * 2 / 3));\n  max-width: calc((100% / 3) - (var(--hds-spacing-8) * 2 / 3));\n  margin-bottom: var(--hds-spacing-8);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--fourths > * {\n  min-width: calc(25% - (var(--hds-spacing-8) * 3 / 4));\n  max-width: calc(25% - (var(--hds-spacing-8) * 3 / 4));\n  margin-bottom: var(--hds-spacing-8);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--two-one > * {\n  min-width: calc((200% / 3) - (var(--hds-spacing-8) / 3)); /* 18 / 3 = 6 */\n  max-width: calc((200% / 3) - (var(--hds-spacing-8) / 3));\n  margin-bottom: var(--hds-spacing-8);\n\n  &:nth-of-type(2n) {\n    min-width: calc((100% / 3) - (var(--hds-spacing-8) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n    max-width: calc((100% / 3) - (var(--hds-spacing-8) * 2 / 3));\n    margin-right: 0;\n  }\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--one-two > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-8) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-8) * 2 / 3));\n  margin-bottom: var(--hds-spacing-8);\n\n  &:nth-of-type(2n) {\n    min-width: calc((200% / 3) - (var(--hds-spacing-8) / 3)); /* 18 / 3 = 6 */\n    max-width: calc((200% / 3) - (var(--hds-spacing-8) / 3));\n    margin-right: 0;\n  }\n}\n\n/* Large gutter desktop calculations */\n.hds-flex--gutter-large-desktop.hds-flex--twos > * {\n  min-width: calc(50% - (var(--hds-spacing-16) / 2)); /* 18 / 2 = 9 */\n  max-width: calc(50% - (var(--hds-spacing-16) / 2));\n  margin-bottom: var(--hds-spacing-16);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--thirds > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-16) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-16) * 2 / 3));\n  margin-bottom: var(--hds-spacing-16);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--fourths > * {\n  min-width: calc(25% - (var(--hds-spacing-16) * 3 / 4)); /* 18 * 3 / 4 = 13.5 */\n  max-width: calc(25% - (var(--hds-spacing-16) * 3 / 4));\n  margin-bottom: var(--hds-spacing-16);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--two-one > * {\n  min-width: calc((200% / 3) - (var(--hds-spacing-16) / 3)); /* 18 / 3 = 6 */\n  max-width: calc((200% / 3) - (var(--hds-spacing-16) / 3));\n  margin-bottom: var(--hds-spacing-16);\n\n  &:nth-of-type(2n) {\n    min-width: calc((100% / 3) - (var(--hds-spacing-16) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n    max-width: calc((100% / 3) - (var(--hds-spacing-16) * 2 / 3));\n    margin-right: 0;\n  }\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--one-two > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-16) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-16) * 2 / 3));\n  margin-bottom: var(--hds-spacing-16);\n\n  &:nth-of-type(2n) {\n    min-width: calc((200% / 3) - (var(--hds-spacing-16) / 3)); /* 18 / 3 = 6 */\n    max-width: calc((200% / 3) - (var(--hds-spacing-16) / 3));\n    margin-right: 0;\n  }\n}\n\n/* Larger gutter desktop calculations */\n.hds-flex--gutter-larger-desktop.hds-flex--twos > * {\n  min-width: calc(50% - (var(--hds-spacing-24) / 2)); /* 48 / 2 = 24 */\n  max-width: calc(50% - (var(--hds-spacing-24) / 2));\n  margin-bottom: var(--hds-spacing-24);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--thirds > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-24) * 2 / 3)); /* 48 * 2 / 3 = 32 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-24) * 2 / 3));\n  margin-bottom: var(--hds-spacing-24);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--fourths > * {\n  min-width: calc(25% - (var(--hds-spacing-24) * 3 / 4)); /* 48 * 3 / 4 = 36 */\n  max-width: calc(25% - (var(--hds-spacing-24) * 3 / 4));\n  margin-bottom: var(--hds-spacing-24);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--two-one > * {\n  min-width: calc((200% / 3) - (var(--hds-spacing-24) / 3)); /* 18 / 3 = 6 */\n  max-width: calc((200% / 3) - (var(--hds-spacing-24) / 3));\n  margin-bottom: var(--hds-spacing-24);\n\n  &:nth-of-type(2n) {\n    min-width: calc((100% / 3) - (var(--hds-spacing-24) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n    max-width: calc((100% / 3) - (var(--hds-spacing-24) * 2 / 3));\n    margin-right: 0;\n  }\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--one-two > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-24) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-24) * 2 / 3));\n  margin-bottom: var(--hds-spacing-24);\n\n  &:nth-of-type(2n) {\n    min-width: calc((200% / 3) - (var(--hds-spacing-24) / 3)); /* 18 / 3 = 6 */\n    max-width: calc((200% / 3) - (var(--hds-spacing-24) / 3));\n    margin-right: 0;\n  }\n}\n\n/* Largest gutter desktop calculations */\n.hds-flex--gutter-largest-desktop.hds-flex--twos > * {\n  min-width: calc(50% - (var(--hds-spacing-40) / 2)); /* 48 / 2 = 24 */\n  max-width: calc(50% - (var(--hds-spacing-40) / 2));\n  margin-bottom: var(--hds-spacing-40);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--thirds > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-40) * 2 / 3)); /* 48 * 2 / 3 = 32 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-40) * 2 / 3));\n  margin-bottom: var(--hds-spacing-40);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--fourths > * {\n  min-width: calc(25% - (var(--hds-spacing-40) * 3 / 4)); /* 48 * 3 / 4 = 36 */\n  max-width: calc(25% - (var(--hds-spacing-40) * 3 / 4));\n  margin-bottom: var(--hds-spacing-40);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--two-one > * {\n  min-width: calc((200% / 3) - (var(--hds-spacing-40) / 3)); /* 18 / 3 = 6 */\n  max-width: calc((200% / 3) - (var(--hds-spacing-40) / 3));\n  margin-bottom: var(--hds-spacing-40);\n\n  &:nth-of-type(2n) {\n    min-width: calc((100% / 3) - (var(--hds-spacing-40) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n    max-width: calc((100% / 3) - (var(--hds-spacing-40) * 2 / 3));\n    margin-right: 0;\n  }\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--one-two > * {\n  min-width: calc((100% / 3) - (var(--hds-spacing-40) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n  max-width: calc((100% / 3) - (var(--hds-spacing-40) * 2 / 3));\n  margin-bottom: var(--hds-spacing-40);\n\n  &:nth-of-type(2n) {\n    min-width: calc((200% / 3) - (var(--hds-spacing-40) / 3)); /* 18 / 3 = 6 */\n    max-width: calc((200% / 3) - (var(--hds-spacing-40) / 3));\n    margin-right: 0;\n  }\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":[]}