[data-rs-context-menu] {
position: relative;
}
[data-rs-context-menu-content] {
position: fixed;
left: var(--context-menu-x, 0);
top: var(--context-menu-y, 0);
z-index: var(--context-menu-z-index);
background: var(--context-menu-bg);
color: var(--context-menu-fg);
border: var(--context-menu-border-width) solid var(--context-menu-border-color);
border-radius: var(--context-menu-radius);
box-shadow: var(--context-menu-shadow);
padding: var(--context-menu-padding);
min-width: var(--context-menu-min-width);
opacity: 0;
visibility: hidden;
transform: scale(0.95);
transition:
opacity var(--context-menu-transition-duration) var(--context-menu-transition-ease),
visibility var(--context-menu-transition-duration) var(--context-menu-transition-ease),
transform var(--context-menu-transition-duration) var(--context-menu-transition-ease);
}
[data-rs-context-menu-item] {
display: flex;
align-items: center;
height: var(--context-menu-item-height);
padding: var(--context-menu-item-padding);
color: var(--context-menu-item-fg);
cursor: pointer;
border-radius: var(--context-menu-radius);
}
[data-rs-context-menu-item]:hover:not([data-rs-state~="active"]):not([data-rs-state~="disabled"]) {
background: var(--context-menu-item-hover-bg);
}
[data-rs-context-menu-item][data-rs-state~="disabled"] {
opacity: var(--opacity-disabled);
pointer-events: none;
cursor: not-allowed;
}
[data-rs-context-menu-separator] {
height: var(--border-thin);
background: var(--context-menu-border-color);
margin: var(--space-xs) 0;
}
[data-rs-context-menu][data-rs-state~="open"] [data-rs-context-menu-content] {
opacity: 1;
visibility: visible;
transform: scale(1);
}
[data-rs-context-menu][data-rs-state~="closed"] [data-rs-context-menu-content] {
opacity: 0;
visibility: hidden;
transform: scale(0.95);
}