@import "../variables";
@import "../mixins";

.Popover {
    @include popover-panel;
    left: 0;
    margin-top: -2px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    transform: scaleY(.8);

    transition: $artistic_transition_duration;
    visibility: hidden;
    z-index: 100;

    &,
    &-position-bottom,
    &-position-bottom-right,
    &-position-bottom-left {
        top: 100%;
        transform-origin: top;
    }

    &-position-top,
    &-position-top-left,
    &-position-top-right {
        bottom: 100%;
        top: auto;
        transform-origin: bottom;
    }

    &-position-bottom-right,
    &-position-top-right {
        left: auto;
        right: 0;
    }

    &-visible {
        margin-top: 0;
        opacity: 1;
        transform: none;
        transition: $artistic_transition_duration_off;
        visibility: visible;
    }

    &-outside {
        position: fixed;
    }

    &:focus {
        outline: none;
    }
}

.Popover-independent-wrapper {
    position: absolute;
    z-index: 9999;
}