{"version":3,"file":"MenuItem.module.cjs","names":[],"sources":["../../../src/components/Menu/MenuItem.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.item {\n  display: grid;\n  grid-template: \"icon label .\" auto \"empty1 label empty2\" auto / auto auto minmax(\n      /* Reserve space for the chevron so that the layout doesn't shift on\n      hover */\n      var(--cpd-space-2x),\n      1fr\n    );\n  place-items: center end;\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-4x);\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-inline-size: 200px;\n  color: var(--cpd-color-text-secondary);\n  background: var(--cpd-color-bg-action-secondary-rest);\n}\n\n.item.interactive,\n.item[data-state] {\n  cursor: pointer;\n}\n\n.item.no-label {\n  grid-template: \"icon .\" auto / auto 1fr;\n}\n\n.label {\n  grid-area: label;\n  margin-inline-end: var(--cpd-space-4x);\n  text-align: start;\n  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */\n}\n\n.item.no-icon {\n  grid-template: \"label .\" auto / auto 1fr;\n\n  .label {\n    /* Without icon, the height changes when hovered */\n    min-block-size: 24px;\n  }\n}\n\n.icon {\n  grid-area: icon;\n  margin-inline-end: var(--cpd-space-3x);\n}\n\n.item.no-label .icon {\n  margin-inline-end: var(--cpd-space-4x);\n}\n\n.nav-hint {\n  /* Hidden until the item is hovered over */\n  display: none;\n  flex-shrink: 0;\n}\n\nbutton.item {\n  appearance: none;\n  border: none;\n}\n\n.item[data-kind=\"primary\"] > .label {\n  color: var(--cpd-color-text-primary);\n}\n\n.item[data-kind=\"primary\"] > .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.item[data-kind=\"primary\"] > .nav-hint {\n  color: var(--cpd-color-icon-tertiary);\n}\n\n.item[data-kind=\"critical\"] > .label {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.item[data-kind=\"critical\"] > .icon,\n.item[data-kind=\"critical\"] > .nav-hint {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n/* Submenu triggers: always show the chevron and apply hover style when open */\n.item[data-state] > .nav-hint {\n  display: initial;\n}\n\n.item[data-state] > .nav-hint ~ * {\n  display: none;\n}\n\n.item[data-state=\"open\"][data-kind=\"primary\"] {\n  background: var(--cpd-color-bg-action-secondary-hovered);\n}\n\n.item[data-state=\"open\"][data-kind=\"critical\"] {\n  background: var(--cpd-color-bg-critical-subtle);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover,\n  .item[data-state][data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover,\n  .item[data-state][data-kind=\"critical\"]:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n\n  /* Replace the children with the navigation hint on hover */\n  .item.interactive:hover > .nav-hint {\n    display: initial;\n  }\n\n  .item.interactive:hover > .nav-hint ~ * {\n    display: none;\n  }\n}\n\n.item.interactive[data-kind=\"primary\"]:active,\n.item[data-state][data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active,\n.item[data-state][data-kind=\"critical\"]:active {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.item[data-kind].disabled {\n  pointer-events: none;\n}\n\n.item[data-kind].disabled > .label,\n.item[data-kind].disabled > .icon,\n.item[data-kind].disabled > .nav-hint {\n  color: var(--cpd-color-text-disabled);\n}\n"],"mappings":""}