export default { css: ({ dt }) => ` .p-contextmenu { padding: 0.25rem 0.25rem; background: ${dt('contextmenu.background')}; color: ${dt('contextmenu.color')}; border: 1px solid ${dt('contextmenu.border.color')}; border-radius: ${dt('rounded.base')}; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); min-width: 12.5rem; } .p-contextmenu ul { margin: 0; padding: 0; list-style: none; } .p-contextmenu-root-list { outline: 0 none; } .p-contextmenu .p-submenu-list { position: absolute; min-width: 100%; z-index: 1; padding: 0.25rem 0.25rem; background: ${dt('contextmenu.background')}; color: ${dt('contextmenu.color')}; border: 1px solid ${dt('contextmenu.border.color')}; border-radius: ${dt('rounded.base')}; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .p-contextmenu .p-menuitem-link { cursor: pointer; display: flex; align-items: center; text-decoration: none; overflow: hidden; position: relative; color: inherit; padding: 0.5rem 0.75rem; user-select: none; } .p-contextmenu .p-menuitem-text { line-height: 1; } .p-contextmenu .p-menuitem { position: relative; margin: 2px 0; } .p-contextmenu .p-menuitem:first-child { margin-top: 0; } .p-contextmenu .p-menuitem:last-child { margin-bottom: 0; } .p-contextmenu .p-menuitem-content { transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; border-radius: ${dt('rounded.sm')}; color: ${dt('contextmenu.item.color')}; } .p-contextmenu .p-menuitem-icon { color: ${dt('contextmenu.item.icom.color')}; margin-right: 0.5rem; } .p-contextmenu .p-submenu-icon { color: ${dt('contextmenu.item.icon.color')}; margin-left: auto; font-size: 0.875rem; width: 0.875rem; height: 0.875rem; } .p-contextmenu .p-menuitem.p-focus > .p-menuitem-content { color: ${dt('contextmenu.item.focus.color')}; background: ${dt('contextmenu.item.focus.background')}; } .p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon, .p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon { color: ${dt('contextmenu.item.icon.focus.color')}; } .p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover { color: ${dt('contextmenu.item.focus.color')}; background: ${dt('contextmenu.item.focus.background')}; } .p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { color: ${dt('contextmenu.item.icon.focus.color')}; } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-content { color: ${dt('contextmenu.item.focus.color')}; background: ${dt('contextmenu.item.focus.background')}; } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-content .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-content .p-submenu-icon { color: ${dt('contextmenu.item.icon.focus.color')}; } .p-contextmenu .p-menuitem-separator { border-top: 1px solid ${dt('contextmenu.separator.border.color')}; margin: 2px 0; } .p-contextmenu-enter-from, .p-contextmenu-leave-active { opacity: 0; } .p-contextmenu-enter-active { transition: opacity 250ms; } ` };