/*
    Bubble
    ------
*/
.evBubble {
    position: relative;
    }
.evBubble > .triangleWrapper {
    position: absolute;
    left: 50px;
    top: -10px;
    width: 16px;
    height: 10px;
    overflow: hidden;
    }
.evBubble > .evBubbleBody {
    position: relative;
    overflow: auto;
    background: var(--surface-overlay);
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: var(--shadow-overlay);
    }

/*
    Triangle Wrapper
    ----------------
*/
.evBubble .triangleWrapper > .triangle {
    width: 10px;
    height: 10px;
    background: var(--surface-overlay);
    transform: rotate(45deg);
    top: 5px;
    left: 3px;
    position: absolute;
    z-index: 1;
    }
.evBubble .triangleWrapper.bottomLeft > .triangle,
.evBubble .triangleWrapper.bottomRight > .triangle,
.evBubble .triangleWrapper.bottomCenter > .triangle {
    top: -5px;
    box-shadow: none;
    }
.evBubble .triangleWrapper.topLeft,
.evBubble .triangleWrapper.bottomLeft {
    left: 20px;
    }
.evBubble .triangleWrapper.topRight,
.evBubble .triangleWrapper.bottomRight {
    left: auto;
    right: 20px;
    }
.evBubble .triangleWrapper.topCenter,
.evBubble .triangleWrapper.bottomCenter {
    left: 50%;
    margin-left: -8px;
    }
.evBubble .triangleWrapper.bottomLeft,
.evBubble .triangleWrapper.bottomRight,
.evBubble .triangleWrapper.bottomCenter {
    top: auto;
    bottom: -10px;
    }
.evBubble .triangleWrapper.leftTop > .triangle,
.evBubble .triangleWrapper.leftBottom > .triangle,
.evBubble .triangleWrapper.leftCenter > .triangle {
    top: 3px;
    left: 5px;
    }
.evBubble .triangleWrapper.leftTop,
.evBubble .triangleWrapper.leftBottom,
.evBubble .triangleWrapper.leftCenter {
    left: -10px;
    height: 16px;
    width: 10px;
    }
.evBubble .triangleWrapper.leftTop,
.evBubble .triangleWrapper.rightTop {
    top: 24px;
    }
.evBubble .triangleWrapper.leftBottom,
.evBubble .triangleWrapper.rightBottom {
    top: auto;
    bottom: 24px;
    }
.evBubble .triangleWrapper.leftCenter,
.evBubble .triangleWrapper.rightCenter {
    top: 50%;
    margin-top: -8px;
    }
.evBubble .triangleWrapper.rightTop,
.evBubble .triangleWrapper.rightBottom,
.evBubble .triangleWrapper.rightCenter {
    left: auto;
    right: -10px;
    height: 16px;
    width: 10px;
    }
.evBubble .triangleWrapper.rightTop > .triangle,
.evBubble .triangleWrapper.rightBottom > .triangle,
.evBubble .triangleWrapper.rightCenter > .triangle {
    top: 3px;
    left: -6px;
    }

/**
    Drawer Bubbles
    For bubbles currently being uses as drawers.
 */
.evBubble.is-drawer > .evBubbleBody {
    background: var(--surface-overlay);
    border-radius: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    }
.evBubble.is-drawer > .evBubbleBody > .header,
.evBubble.is-drawer > .evBubbleBody > .footer {
    padding: var(--spacer-3);
    }
.evBubble.is-drawer > .evBubbleBody > .items-container {
    flex-grow: 1;
    overflow: auto;
    }
.evBubble.is-drawer .triangleWrapper {
    display: none;
    }

/**
    Dark Bubble
 */
.evBubble.is-dark > .evBubbleBody {
    background: /*style.primary(*/#3e653e/*)*/;
    color: /*style.text_color_on_primary(*/#FFF/*)*/;
    }
.evBubble.is-dark > .evBubbleBody a:not(.evButton) {
    color: /*style.text_color_on_primary(*/#FFF/*)*/;
    }
.evBubble.is-dark > .evBubbleBody a:not(.evButton):hocus {
    color: /*style.text_color_on_primary(*/#FFF/*)*/;
    text-decoration: underline;
    }
.evBubble.is-dark > .evBubbleBody h1,
.evBubble.is-dark > .evBubbleBody h2,
.evBubble.is-dark > .evBubbleBody h3,
.evBubble.is-dark > .evBubbleBody h4,
.evBubble.is-dark > .evBubbleBody h5,
.evBubble.is-dark > .evBubbleBody h6 {
    color: /*style.text_color_on_primary(*/#FFF/*)*/;
    }
.evBubble.is-dark > .evBubbleBody .evButton {
    color: /*style.primary(*/#3e653e/*)*/;
    border-color: /*style.text_color_on_primary(*/#FFF/*)*/ !important;
    background: /*style.text_color_on_primary(*/#FFF/*)*/ !important;
    }
.evBubble.is-dark .triangleWrapper > .triangle {
    background: /*style.primary(*/#3e653e/*)*/;
    }