@import "../../css/sass/variables"
@import "../../css/sass/mixins"

.popover
    left: 0
    top: 0

    position: absolute
    z-index: 1004
    min-width: 250px
    background: $color-popup-shadow
    padding: $shadow-width
    text-align: $left

    @if $alt-box-radius > 0
        border-radius: $alt-box-radius

    &:before
        content: ''
        position: absolute
        top: -5px
        left: 50%
        margin-left: -5px
        width: 0
        height: 0
        border-style: solid
        border-width: 0 5px 5px 5px
        border-color: transparent transparent $color-popup-shadow transparent

    &.above:before
        top: auto
        bottom: -5px
        border-width: 5px 5px 0 5px
        border-color: $color-popup-shadow transparent transparent transparent
    
    > div
        width: 100%
        height: 100%
        background: $color-popup-bg
        padding: $spacer * 2

        @if $alt-box-radius > 0
                border-radius: $alt-box-radius

        > .caption
            font-size: 1.071em
            font-weight: $weight-medium
            margin-top: -$spacer
            padding: 0 $gutter $spacer 0
            position: relative

            .close
                position: absolute
                top: -5px
                #{$right}: -5px

        > .body
            > input
                width: 100%

        > .error
            +error-text
            padding: $spacer / 2 0 0


    nav
        padding-top: $spacer * 1.5
        text-align: $right

        > *
            margin-#{$left}: $spacer / 2
            vertical-align: top
