// Demo-specific styles go here. Skin-specific styles go in ../style.styl.

.demo-popover {
    .b-dialog {
        outline: 0;
    }

    .b-dialog-body {
        padding: 0;
    }

    // above the anchor
    &.b-popover-anchor-y-start.b-popover-self-y-end .b-dialog {
        border-bottom: 3px solid color-accent;
    }

    // below the anchor
    &.b-popover-anchor-y-end.b-popover-self-y-start .b-dialog {
        border-top: 3px solid color-accent;
    }

    // left of the anchor
    &.b-popover-anchor-x-start.b-popover-self-x-end .b-dialog {
        border-right: 3px solid color-accent;
    }

    // right of the anchor
    &.b-popover-anchor-x-end.b-popover-self-x-start .b-dialog {
        border-left: 3px solid color-accent;
    }
}

@media (max-width: 600px) {
    .demo-popover {
        max-width: 75vw;
    }
}