/* ---------------------------------------------------
SVG Styling + Animation
--------------------------------------------------- */
.svg { transition: all 0.15s ease; }
.svg--white { fill: #ededed; }
.svg--medium-grey { fill: #33353A; }
.svg--light-grey { fill: #acaeb1; }

/* Hover State */
.publisher-menu__button:hover .svg {
    transform: scale(1.1);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}
.publisher-menu__button:hover .svg__animate { animation: svgAnimate 0.4s ease forwards; }
.publisher-menu__button:hover .svg__animate.bottom { transform-origin: 50% 85%; }
.publisher-menu__button:hover .svg__animate.middle { transform-origin: 50% 50%; }
.publisher-menu__button:hover .svg--light-grey:not(.keep-color) { fill: #5caaf8; }

/* SVG Animation */
@keyframes svgAnimate {
    50% { transform: scale(1.3); }
    100% { transform: scale(1.1); }
}


/* ---------------------------------------------------
Optional sibling fade code
--------------------------------------------------- */
.wasusermenu-wrapper .main:hover svg { opacity: 0.7; } /* Fade out all items when the parent is hovered */
.wasusermenu-wrapper .publisher-menu__button:hover svg { opacity: 1 !important; } /* Fade in the currently hovered item */

.wasusermenu-wrapper .publisher-menu__button > a {
    line-height: 0;
    padding: .9em 1.1em;
}

/* Edit/Toolbar Button, NOT hover */
.wasusermenu-wrapper .toggle[class]:not(.hover-state) { transition-delay: 0.2s; }
/* .wasusermenu-wrapper .toggle[class]:not(.hover-state) .svg { transform: scale(1.25); } */
.wasusermenu-wrapper .toggle[class]:not(.hover-state) .transparent { fill: transparent; }

/* ---------------------------------------------------
Publisher Toolbar
--------------------------------------------------- */
#block-wasusermenu .contextual { display: none; }

.wasusermenu-wrapper {
    font-family: "Lato", sans-serif;
    color: white;
    font-size: 14px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.15s ease-in-out;
    z-index: 510;
    pointer-events: none;
}

/* ---------------------------------------------------
Edit/Toggle Toolbar - Button
--------------------------------------------------- */
.wasusermenu-wrapper .toggle[class] {
    position: absolute;
    transform: translateY(-50%);
    top: 0;
    right: 0;
    z-index: 2;
    opacity: 1;
    background: #6f7688;
    pointer-events: auto;

    /* Styles when Inactive */
    width: 2.5em;
    height: 2.5em;
}

/* ---------------------------------------------------
Toolbar Menu - <ul>
--------------------------------------------------- */
.wasusermenu-wrapper .main {
    background: #33353A;
    transform: scaleY(0);
    transition: all 0.2s ease-in-out;
    border-radius: 4.25em;
    padding: 0;
    margin: 0;
}

/* Toolbar Menu - Active */
.wasusermenu-wrapper .main.active {
    transform: scaleY(1);
    border-radius: 0;
    transition-delay: 0.14s;
    pointer-events: auto;
}

/* Toolbar Menu Dropshadow */
.wasusermenu-wrapper .publisher-menu { box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.15); }

/* ---------------------------------------------------
Menu Buttons - <li>
--------------------------------------------------- */
.wasusermenu-wrapper .publisher-menu__button {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25em;
    height: 4.25em;
    transition: all 0.2s ease;
    /* Styles when Inactive */
    opacity: 0;
}