@import "variables";

.vn-popover {
    z-index: 20;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: $color-font;

    opacity: 0;
    transform: translateY(-.6em);
    transition-property: opacity, transform;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;

    &.shown {
        transform: translateY(0);
        opacity: 1;
    }
    & > .window {
        position: absolute;
        box-shadow: 0 .1em .4em $color-shadow;
        z-index: 0;

        & > .arrow {
            width: 1em;
            height: 1em;
            margin: -.5em;
            background-color: $color-bg-panel;
            box-shadow: 0 .1em .4em $color-shadow;
            position: absolute;
            transform: rotate(45deg);
            z-index: -1;
        }
        & > .content {
            border-radius: .1em;
            background-color: $color-bg-panel;
            height: inherit;
            overflow: auto;
        }
    }
}