{"version":3,"file":"DrawerMenu.module.cjs","names":[],"sources":["../../../src/components/Menu/DrawerMenu.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.bg {\n  position: fixed;\n  inset: 0;\n\n  /* TODO: This value is used across modals and menu drawers, so would be worth\n  tokenizing */\n  background: rgb(3 12 27 / 52.8%);\n}\n\n.drawer {\n  position: fixed;\n  background: var(--cpd-color-bg-canvas-default);\n  inset-block-end: 0;\n  inset-inline: 0;\n\n  /* Cap the inline content size at 520px, filling the rest of the space with\n  padding */\n  padding-inline: max(0px, calc((100% - 520px) / 2));\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n  display: flex;\n  flex-direction: column;\n\n  /* Drawer comes in the Android style by default */\n  --border-radius: 28px;\n  --handle-block-size: 4px;\n  --handle-inline-size: 32px;\n  --handle-inset-block-start: var(--cpd-space-4x);\n  --handle-inset-block-end: 0px;\n  --content-inset-block-start: calc(\n    var(--handle-inset-block-start) + var(--handle-block-size) +\n      var(--handle-inset-block-end)\n  );\n}\n\n.drawer[data-platform=\"ios\"] {\n  --border-radius: 10px;\n  --handle-block-size: 5px;\n  --handle-inline-size: 36px;\n  --handle-inset-block-start: var(--cpd-space-1-5x);\n  --handle-inset-block-end: 1px;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-2x);\n  padding-block: calc(var(--content-inset-block-start) + var(--cpd-space-6x))\n    var(--cpd-space-12x);\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n\n  /* Even with overflow: auto, the content can still overflow at the corners\n  where it meets with the curved border. A contain: paint fixes that. */\n  contain: paint;\n  overflow: auto;\n  scrollbar-width: none;\n\n  --cpd-separator-spacing: 0;\n  --cpd-separator-inset: var(--cpd-space-4x);\n}\n\n.body::before {\n  content: \"\";\n  position: absolute;\n  block-size: var(--handle-block-size);\n  inset-inline: calc((100% - var(--handle-inline-size)) / 2);\n  inset-block-start: var(--handle-inset-block-start);\n  background: var(--cpd-color-icon-secondary);\n  border-radius: var(--cpd-radius-pill-effect);\n}\n"],"mappings":""}