/*
Theme Name: PF-2021
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Menu contextual
--------------------------------------------
*/


.menucontextual { --cor-fundo: rgba(58,58,58,.95); }
.menucontextual { position: absolute; z-index: 99; left: 100px; display: flex; flex-direction: column; padding: 8px 0; font-weight: var(--font-weight-regular); color: var(--cor-cinza-ainda-mais-claro); background-color: var(--cor-fundo); animation: menucontextual 200ms ease-in-out; transition: opacity 200ms ease-in-out; }

.menucontextual .titulo { padding: 8px 20px; margin-bottom: 8px; font-size: var(--h3-font-size); line-height: var(--h3-font-size); font-weight: var(--font-weight-regular); }
.menucontextual .titulo:before { position: absolute; bottom: 8px; left: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid var(--cor-cinza-mais-escuro); content: ""; pointer-events: none; }
.menucontextual.espelhado .titulo:before { left: auto; right: -10px; border-right: none; border-left: 10px solid var(--cor-cinza-mais-escuro); }
.menucontextual .titulo small { display: table; color: var(--cor-cinza-mais-claro); font-size: var(--font-size-menor); line-height: var(--font-size-menor); }

.menucontextual a { display: block; padding: 7px 40px 7px 20px; font-size: var(--h6-font-size); font-weight: var(--font-weight-medium); text-transform: uppercase; color: var(--cor-cinza-ainda-mais-claro); white-space: nowrap; background-image: linear-gradient(var(--cor-cinza-translucido-medio), var(--cor-cinza-translucido-medio)); background-position: 100% 100%; background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 100ms ease-in-out; }
.menucontextual a.negativo { background-image: linear-gradient(rgba(206,98,95,.5), rgba(206,98,95,.5)); }
/*.menucontextual a.negativo:before { position: absolute; z-index: 2; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 100%; margin-top: -5px; background-color: var(--cor-perigo); content: ""; }*/
/*.menucontextual > ul > li > a.negativo:before { position: absolute; z-index: 2; top: 0; left: -7px; width: 7px; height: 100%; background-color: var(--cor-perigo); content: ""; }*/
.menucontextual a:link { color: var(--cor-cinza-ainda-mais-claro); }
.menucontextual a:visited { color: var(--cor-cinza-ainda-mais-claro); }
.menucontextual a:hover, 
.menucontextual a:focus,
.menucontextual > ul > li:hover > a { background-size: 100% 100%; background-position: 0 100%; }
.menucontextual a:active { color: var(--cor-cinza-ainda-mais-claro); background-image: linear-gradient(var(--cor-cinza-translucido-claro), var(--cor-cinza-translucido-claro)); }
.menucontextual a span { padding-left: 3px; font-weight: var(--font-weight-light); }

.menucontextual ul { padding: 0; margin: 0; list-style: none; }

.menucontextual.invertido > ul { order: -1; }

.menucontextual > ul > li > ul { visibility: hidden; position: absolute; top: -8px; left: 100%; padding: 8px 0; background-color: var(--cor-fundo); }

.menucontextual > ul > li:hover > ul,
.menucontextual > ul > li:focus-within > ul,
.menucontextual > ul > li > a:focus + ul { visibility: visible; animation: submenucontextual 200ms ease-in-out; }

.menucontextual > ul > li > ul:before { position: absolute; top: 16px; left: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid var(--cor-cinza-escuro); content: ""; }
.menucontextual ul ul { --cor-fundo: rgba(68,68,68,.95); padding-left: 20px; }
.menucontextual ul ul a { padding-right: 25px; }

.menucontextual > ul > li > ul > li li:before { position: absolute; z-index: 2; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--cor-cinza-mais-claro); content: ""; }
.menucontextual > ul > li > ul > li li:last-child:before { height: calc(100% - 18px); }
.menucontextual > ul > li > ul > li li:after { position: absolute; z-index: 2; top: 18px; left: 0; width: 10px; height: 1px; background-color: var(--cor-cinza-mais-claro); content: ""; }

@keyframes menucontextual {
	from{
		transform: translateY(30px);
		opacity: 0;
	}
	to {
		transform: translateY(0px);
		opacity: 1;
	}
}

@keyframes submenucontextual { 
	0% { transform: translateY(30px); opacity: 0; } 
	100% { transform: translateY(0); opacity: 1; } 
}