.contextMenuClose width: 100% height: 100% position: fixed top: 0 left: 0 background-color: transparent z-index: 99998 .contextMenu margin: 0 padding: 0.25rem width: calc( 100vw - 10px ) height: auto max-width: 300px position: absolute display: flex flex-direction: column justify-content: flex-start align-items: flex-start gap: 0.25rem background-color: var(--background-300) border: 1px solid var(--background-200) border-radius: 6px overflow: hidden transition: transform 0.35s var(--animation-bounce), opacity 0.35s var(--animation-bounce) transform-origin: center center opacity: 0.5 transform: scale(0, 0) z-index: 99999 .contextMenuTitle margin: 0 padding: 0.25rem 0.5rem width: 100% text-align: center font-size: 1.2rem font-weight: 400 color: var(--foreground-white) .contextMenuItem margin: 0 padding: 0.5rem width: 100% height: auto display: flex flex-direction: row justify-content: flex-start align-items: center gap: 0.5rem background-color: var(--background-300) color: var(--foreground-white) border: none border-radius: 3px cursor: pointer .contextMenuItem:hover background-color: var(--background-200) .contextMenuItem__critical color: var(--danger) .contextMenuItem__warning color: var(--warning) .contextMenuItem__success color: var(--success) .contextMenuItem__info color: var(--primary) .contextMenuText margin: 0 padding: 0 font-size: 1rem font-weight: 400 .contextMenuIcon margin: 0 padding: 0 width: 1.25rem height: 1.25rem display: flex justify-content: center align-items: center .contextMenuDivider margin: 0 auto padding: 0 width: 100% height: 1px border: none background-color: var(--background-200) .contextMenu__show opacity: 1 transform: scale(1, 1) .contextMenu__show--mouse opacity: 1 transform: scale(1, 1) transform-origin: top left .contextMenu__show--button opacity: 1 transform: scale(1, 1) transform-origin: top center .contextMenu__show--center opacity: 1 transform: scale(1, 1) transform-origin: center center .contextMenu__hide opacity: 0 transform: scale(0, 0)