.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: RGB($bg-300)
    border: 1px solid RGB($bg-200)
    border-radius: 6px

    overflow: hidden

    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
    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: RGB($fg-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: RGB($bg-300)
    color: RGB($fg-white)
    border: none
    border-radius: 3px

    cursor: pointer
.contextMenuItem:hover
    background-color: RGB($bg-200)
.contextMenuItem__critical
    color: RGB($critical)
.contextMenuItem__warning
    color: RGB($warning)
.contextMenuItem__success
    color: RGB($success)
.contextMenuItem__info
    color: RGB($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: RGB($bg-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)
