#context-menu {
    position: fixed;
    z-index: 200;
    width: fit-content;
    border-radius: 6px;
    display: none;

    backdrop-filter: blur(6px);
    overflow: hidden;
}

#context-menu .item {
    font-size: 12px !important;
    color: #eee;
    cursor: pointer;
    padding: 8px;
    opacity: 1;
    filter: none;
}

#context-menu .item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

#context-menu.visible {
    display: block;
}

#context-menu label.icon {
    display: inline-block;
    height: 100%;
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}
#context-menu .item.context-item-success {
    color: rgba(135, 222, 84, 1);
}

#context-menu .item.context-item-success:hover {
    background-color: rgba(75, 161, 53, 0.5);
    color: white;
}

#context-menu .item.context-item-error {
    color: #eb5055;
}

#context-menu .item.context-item-error:hover {
    background-color: rgba(235, 80, 85, 0.5);
    color: white;
}

#context-menu .item.context-item-ok {
    color: #5d7fe3;
}

#context-menu .item.context-item-ok:hover {
    background-color: rgba(93, 127, 227, 0.5);
    color: white;
}

#context-menu .item.context-item-warning {
    color: orange;
}

#context-menu .item.context-item-warning:hover {
    background-color: rgba(255, 165, 0, 0.5);
    color: white;
}

/* ---------------------------------------------------------------------------
   Menu de contexto no estilo do alvo
   --------------------------------------------------------------------------- */

#context-menu {
    min-width: 210px;
    padding: 6px 8px;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

#context-menu .item {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 8px;
    margin: 1px 0;
    border-radius: 4px;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

#context-menu .item:hover {
    background-color: #5865f2;
    color: #ffffff;
}

/* acoes destrutivas ficam vermelhas e so pintam de vermelho no hover */
#context-menu .item.context-item-error {
    color: #f23f43;
}

#context-menu .item.context-item-error:hover {
    background-color: #da373c;
    color: #ffffff;
}

#context-menu .item.context-item-success,
#context-menu .item.context-item-ok {
    color: inherit;
}

#context-menu label.icon {
    width: 18px;
    text-align: center;
    opacity: .75;
    flex: 0 0 auto;
}

#context-menu .item:hover label.icon {
    opacity: 1;
}

#context-menu hr {
    margin: 5px 2px !important;
    border-top-color: rgba(255, 255, 255, .08) !important;
}

/* ---------------------------------------------------------------------------
   Itens especiais: divisor, inativo, subtexto, caixa e submenu
   --------------------------------------------------------------------------- */

#context-menu {
    overflow: visible;
}

#context-menu .ctx-divisor {
    height: 1px;
    margin: 5px 2px;
    border: none;
    background-color: rgba(255, 255, 255, .08);
}

#context-menu .item {
    position: relative;
    justify-content: space-between;
}

#context-menu .ctx-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

#context-menu .ctx-titulo {
    font-size: 14px;
    font-weight: 500;
}

/* a segunda linha explica o estado atual, sem competir com o titulo */
#context-menu .ctx-subtitulo {
    font-size: 12px;
    color: #949ba4;
}

#context-menu .item:hover .ctx-subtitulo {
    color: rgba(255, 255, 255, .75);
}

/* inativo continua visivel, para indicar que a acao existe mas nao cabe agora */
#context-menu .item.ctx-inativo {
    color: #4e5058;
    cursor: default;
    pointer-events: none;
}

#context-menu .item.ctx-inativo:hover {
    background: transparent;
}

#context-menu .ctx-caixa {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;

    border: 1px solid #4e5058;
    border-radius: 4px;
    background-color: transparent;
}

#context-menu .ctx-caixa.marcada {
    border-color: #5865f2;
    background-color: #5865f2;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 13px 13px;
    background-position: center center;
    background-repeat: no-repeat;
}

/* seta indicando que o item abre outro nivel */
#context-menu .ctx-seta {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;

    background-color: currentColor;
    -webkit-mask: var(--ctx-seta) center center / 14px 14px no-repeat;
    mask: var(--ctx-seta) center center / 14px 14px no-repeat;
    opacity: .7;
}

:root {
    --ctx-seta: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* o submenu abre ao lado, no hover do item que o contem */
#context-menu .ctx-submenu {
    position: absolute;
    top: -6px;
    left: 100%;
    z-index: 210;

    display: none;
    min-width: 190px;
    padding: 6px 8px;

    border-radius: 6px;
    background: inherit;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

#context-menu .ctx-com-submenu:hover .ctx-submenu {
    display: block;
}

#context-menu .ctx-submenu .item {
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Reforcos do submenu
   --------------------------------------------------------------------------- */

/* o menu precisa deixar o submenu sair das bordas */
#context-menu,
#context-menu.visible {
    overflow: visible !important;
}

/* o submenu so existe no hover; sem isto ele cai no fluxo e a lista fica
   toda expandida, que era o que acontecia quando este arquivo nao carregava */
#context-menu .ctx-submenu {
    display: none;
    position: absolute;
    top: -6px;
    left: calc(100% + 2px);
    z-index: 260;

    min-width: 190px;
    padding: 6px 8px;
    border-radius: 6px;

    background: #111214;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

#context-menu .item.ctx-com-submenu:hover > .ctx-submenu {
    display: block;
}

/* o item que abre o submenu fica destacado enquanto ele esta aberto */
#context-menu .item.ctx-com-submenu:hover {
    background-color: #4752c4;
    color: #ffffff;
}

#context-menu .ctx-submenu .item {
    display: flex;
    align-items: center;
    padding: 7px 8px;
    border-radius: 4px;
    color: #dbdee1;
    white-space: nowrap;
}

#context-menu .ctx-submenu .item:hover {
    background-color: #5865f2;
    color: #ffffff;
}

/* titulo e descricao em linhas separadas */
#context-menu .item .ctx-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

/* ---------------------------------------------------------------------------
   Fundo do menu
   --------------------------------------------------------------------------- */

/* o menu usa o mesmo cinza das colunas, e nao um preto proprio: assim ele
   pertence a interface em vez de flutuar como um bloco estranho */
#context-menu {
    background: hsl(from var(--main) h s calc(l * 2.6));
    border: 1px solid hsl(from var(--main) h s calc(l * 1.2));
    backdrop-filter: none;
}

#context-menu .ctx-submenu {
    background: hsl(from var(--main) h s calc(l * 2.6));
    border-color: hsl(from var(--main) h s calc(l * 1.2));
}