@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$popover-background-color: $white-color !default;
$popover-arrow-width: 16px !default;
$popover-arrow-height: 8px !default;
$popover-arrow-offset-from: 'right' !default;
$popover-arrow-offset-distance: calc(50% - #{$popover-arrow-width / 2}) !default;
$popover-box-shadow: 0 10px 20px 0 transparentize($black-color, 0.9) !default;

.c-popover-component {
    position: relative;
    background: $popover-background-color;
    box-shadow: $popover-box-shadow;
}

    .c-popover-component--down {
        @include css-arrow2(
            $arrowColor: $popover-background-color,
            $direction: 'up',
            $arrowWidth: $popover-arrow-width,
            $arrowHeight: $popover-arrow-height,
            $offsetFrom: $popover-arrow-offset-from,
            $distance: $popover-arrow-offset-distance
        )
    }

    .c-popover-component--up {
        @include css-arrow2(
            $arrowColor: $popover-background-color,
            $direction: 'down',
            $arrowWidth: $popover-arrow-width,
            $arrowHeight: $popover-arrow-height,
            $offsetFrom: $popover-arrow-offset-from,
            $distance: $popover-arrow-offset-distance
        )
    }