@import "./mixins";
$component-name: #{$prefix}-popover;

.#{$component-name} {
    background-color: $c-popover-background;
    min-width: rem($popover-min-width);
    max-width: rem($popover-max-width);
    max-height: rem($popover-max-height);
    padding-bottom: rem($popover-bottom-padding);
    border-radius: $popover-border-radius;
    filter: drop-shadow($popover-drop-shadow);
    position: relative;
    z-index: z(popover);
    overflow-x: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    // Elements
    &__arrow {
        width: 0;
        height: 0;
        display: block;
        border-color: transparent;
        border-style: solid;
        border-width: $popover-arrow-size;
        position: absolute;
        left: 50%;
        margin-left: -$popover-arrow-size;
    }

    // Position
    &--bottom {
        .#{$component-name}__arrow {
            top: -$popover-arrow-size;
            border-top-width: 0;
            border-bottom-color: $c-popover-background;
        }
    }

    &--top {
        .#{$component-name}__arrow {
            bottom: -$popover-arrow-size;
            border-bottom-width: 0;
            border-top-color: $c-popover-background;
        }
    }
}

@import "./mixins";
$component-name: #{$prefix}-popover;

.#{$component-name} {
    background-color: $c-popover-background;
    min-width: rem($popover-min-width);
    max-width: rem($popover-max-width);
    padding-bottom: rem($popover-bottom-padding);
    border-radius: $popover-border-radius;
    filter: drop-shadow($popover-drop-shadow);
    position: relative;
    z-index: z(popover);

    // Elements
    &__arrow {
        width: 0;
        height: 0;
        display: block;
        border-color: transparent;
        border-style: solid;
        border-width: $popover-arrow-size;
        position: absolute;
        left: 50%;
        margin-left: -$popover-arrow-size;
    }

    &__container {
        max-height: rem($popover-max-height);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    // Position
    &--bottom {
        .#{$component-name}__arrow {
            top: -$popover-arrow-size;
            border-top-width: 0;
            border-bottom-color: $c-popover-background;
        }
    }

    &--top {
        .#{$component-name}__arrow {
            bottom: -$popover-arrow-size;
            border-bottom-width: 0;
            border-top-color: $c-popover-background;
        }
    }
}

Fix popover should only scroll inside container
Fix popover should only scroll inside container
