{"version":3,"sourceRoot":null,"mappings":"AAEA,unDAmDE,oHAMA,yBAAkB,wOAQlB,yBAAmB,6OAQnB,yBAAkB,wOAQlB,0BAAmB,6OAQnB,87BAuBE,yBAAkB,yIAKlB,yBAAmB,2IAKnB,yBAAkB,yIAKlB,0BAAmB","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/grid/grid.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/grid/../../_custom-media.css"],"sourcesContent":["@import url(\"../../_custom-media.css\");\n\n.hds-grid {\n  /* Gap */\n  --hds-grid-gap-initial: initial;\n  --hds-grid-gap-small: var(--hds-grid-gap-initial);\n  --hds-grid-gap-medium: var(--hds-grid-gap-small);\n  --hds-grid-gap-large: var(--hds-grid-gap-medium);\n  --hds-grid-gap-xlarge: var(--hds-grid-gap-large);\n  --hds-grid-gap: var(--hds-grid-gap-initial);\n  --hds-grid-gap-x-initial: var(--hds-grid-gap);\n  --hds-grid-gap-x-small: var(--hds-grid-gap-x-initial);\n  --hds-grid-gap-x-medium: var(--hds-grid-gap-x-small);\n  --hds-grid-gap-x-large: var(--hds-grid-gap-x-medium);\n  --hds-grid-gap-x-xlarge: var(--hds-grid-gap-x-large);\n  --hds-grid-gap-x: var(--hds-grid-gap-x-initial);\n  --hds-grid-gap-y-initial: var(--hds-grid-gap);\n  --hds-grid-gap-y-small: var(--hds-grid-gap-y-initial);\n  --hds-grid-gap-y-medium: var(--hds-grid-gap-y-small);\n  --hds-grid-gap-y-large: var(--hds-grid-gap-y-medium);\n  --hds-grid-gap-y-xlarge: var(--hds-grid-gap-y-large);\n  --hds-grid-gap-y: var(--hds-grid-gap-y-initial);\n\n  /* Column span */\n  --hds-grid-span-initial: 12;\n  --hds-grid-span-small: var(--hds-grid-span-initial);\n  --hds-grid-span-medium: var(--hds-grid-span-small);\n  --hds-grid-span-large: var(--hds-grid-span-medium);\n  --hds-grid-span-xlarge: var(--hds-grid-span-large);\n  --hds-grid-span: var(--hds-grid-span-initial);\n\n  /* Center */\n  --hds-grid-center-initial: unset;\n  --hds-grid-center-small: var(--hds-grid-center-initial);\n  --hds-grid-center-medium: var(--hds-grid-center-small);\n  --hds-grid-center-large: var(--hds-grid-center-medium);\n  --hds-grid-center-xlarge: var(--hds-grid-center-large);\n  --hds-grid-center: var(--hds-grid-center-initial);\n\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  column-gap: var(--hds-grid-gap-x);\n  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- cannot use shorthand as `initial` is an invalid value in shorthand */\n  row-gap: var(--hds-grid-gap-y);\n\n  /**\n   * Set the grid start, allowing for centering by setting a start position relative to the column span\n   * Abuses the fact that `0` is an invalid start value, so we can toggle this behaviour by including `--hds-grid-center` in the calculation.\n   * Assumes a span of 2, 4, 6, 8, or 10 for the centering be correct.\n   */\n  --hds-grid-start: calc(var(--hds-grid-center) * ((12 - var(--hds-grid-span)) / 2 + 1));\n\n  /* Set values for grid items */\n  > * {\n    grid-column: span var(--hds-grid-span) / span var(--hds-grid-span);\n    grid-column-start: var(--hds-grid-start);\n  }\n\n  /* Responsive */\n  @media (--small) {\n    --hds-grid-gap: var(--hds-grid-gap-small);\n    --hds-grid-gap-x: var(--hds-grid-gap-x-small);\n    --hds-grid-gap-y: var(--hds-grid-gap-y-small);\n    --hds-grid-span: var(--hds-grid-span-small);\n    --hds-grid-center: var(--hds-grid-center-small);\n  }\n\n  @media (--medium) {\n    --hds-grid-gap: var(--hds-grid-gap-medium);\n    --hds-grid-gap-x: var(--hds-grid-gap-x-medium);\n    --hds-grid-gap-y: var(--hds-grid-gap-y-medium);\n    --hds-grid-span: var(--hds-grid-span-medium);\n    --hds-grid-center: var(--hds-grid-center-medium);\n  }\n\n  @media (--large) {\n    --hds-grid-gap: var(--hds-grid-gap-large);\n    --hds-grid-gap-x: var(--hds-grid-gap-x-large);\n    --hds-grid-gap-y: var(--hds-grid-gap-y-large);\n    --hds-grid-span: var(--hds-grid-span-large);\n    --hds-grid-center: var(--hds-grid-center-large);\n  }\n\n  @media (--xlarge) {\n    --hds-grid-gap: var(--hds-grid-gap-xlarge);\n    --hds-grid-gap-x: var(--hds-grid-gap-x-xlarge);\n    --hds-grid-gap-y: var(--hds-grid-gap-y-xlarge);\n    --hds-grid-span: var(--hds-grid-span-xlarge);\n    --hds-grid-center: var(--hds-grid-center-xlarge);\n  }\n\n  > .hds-grid__item {\n    --hds-grid-item-span-initial: var(--hds-grid-span);\n    --hds-grid-item-span-small: var(--hds-grid-item-span-initial);\n    --hds-grid-item-span-medium: var(--hds-grid-item-span-small);\n    --hds-grid-item-span-large: var(--hds-grid-item-span-medium);\n    --hds-grid-item-span-xlarge: var(--hds-grid-item-span-large);\n    --hds-grid-item-span: var(--hds-grid-item-span-initial);\n    --hds-grid-item-center-initial: var(--hds-grid-center);\n    --hds-grid-item-center-small: var(--hds-grid-item-center-initial);\n    --hds-grid-item-center-medium: var(--hds-grid-item-center-small);\n    --hds-grid-item-center-large: var(--hds-grid-item-center-medium);\n    --hds-grid-item-center-xlarge: var(--hds-grid-item-center-large);\n    --hds-grid-item-center: var(--hds-grid-item-center-initial);\n\n    /* Assumes a span of 2, 4, 6, 8, or 10 */\n    --hds-grid-item-start: calc(\n      var(--hds-grid-item-center) * ((12 - var(--hds-grid-item-span)) / 2 + 1)\n    );\n\n    grid-column: span var(--hds-grid-item-span) / span var(--hds-grid-item-span);\n    grid-column-start: var(--hds-grid-item-start);\n\n    /* Responsive */\n    @media (--small) {\n      --hds-grid-item-span: var(--hds-grid-item-span-small);\n      --hds-grid-item-center: var(--hds-grid-item-center-small);\n    }\n\n    @media (--medium) {\n      --hds-grid-item-span: var(--hds-grid-item-span-medium);\n      --hds-grid-item-center: var(--hds-grid-item-center-medium);\n    }\n\n    @media (--large) {\n      --hds-grid-item-span: var(--hds-grid-item-span-large);\n      --hds-grid-item-center: var(--hds-grid-item-center-large);\n    }\n\n    @media (--xlarge) {\n      --hds-grid-item-span: var(--hds-grid-item-span-xlarge);\n      --hds-grid-item-center: var(--hds-grid-item-center-xlarge);\n    }\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":[]}