{"mappings":"AAYA;;;;AASA;;;;;;;;;AAmBA","sources":["packages/@react-spectrum/layout/src/flex-gap.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n  /* this is necessary so that the inner margins don't affect anything outside */\n  display: flex;\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-gap {\n  --gap: 0px;\n  --column-gap: var(--gap);\n  --row-gap: var(--gap);\n\n  /* apply a negative margin to counteract the margin on each item at the edges */\n  margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n  /* increase the width and height to account for this margin */\n  /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n  width: calc(100% + calc(var(--column-gap) + 1px));\n  height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n  /* apply half of the gap to each side of every item */\n  margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n"],"names":[],"version":3,"file":"main.css.map"}