@import '../../css/variables';
@import '../../css/mixins';
@import 'css/variables';
@import 'css/sizes';
@import 'css/colors';

.popover-wrapper {
    display: inline-block;
    position: relative;

    .popover-trigger {
        display: contents;
    }
}

.popover {
    @include popup(('z-index': var(----z-index)));
    @include popup-arrow();
    @include popup-arrow-size-variant();

    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
    list-style: none;
    line-height: var(----line-height);
    box-shadow: var(----box-shadow);
    background-clip: padding-box;
    display: inline-block;
    white-space: normal;
    width: var(----width);
    max-width: var(----max-width);
    color: var(----color);
    font-size: var(----font-size);

    > .popover-header {
        border-style: var(----header--border-style);
        border-width: var(----header--border-width);
        border-bottom-width: 0;
        border-color: var(----header--border-color);
        background-color: var(----header--background);
        padding: var(----header--padding);
    }

    > .popover-body {
        border-style: var(----body--border-style);
        border-width: var(----body--border-width);
        background-color: var(----body--background);
        border-color: var(----body--border-color);
        padding: var(----body--padding);
    }

    > .popover-footer {
        border-style: var(----footer--border-style);
        border-width: var(----footer--border-width);
        border-top-width: 0;
        border-color: var(----footer--border-color);
        background-color: var(----footer--background);
        padding: var(----footer--padding);
    }

    > *:nth-child(2) {
        border-top-left-radius: var(----border-top-left-radius);
        border-top-right-radius: var(----border-top-right-radius);
    }

    > *:last-child {
        border-bottom-left-radius: var(----border-bottom-left-radius);
        border-bottom-right-radius: var(----border-bottom-right-radius);
    }

    @include popup-arrow-color-variant-for-side('top', (
        'background': var(----body--background),
        'border-color': var(----border-top-color)
    ));

    @include popup-arrow-color-variant-for-side('bottom', (
        'background': var(----body--background),
        'border-color': var(----border-bottom-color)
    ));

    @include popup-arrow-color-variant-for-side('left', (
        'background': var(----body--background),
        'border-color': var(----border-left-color)
    ));

    @include popup-arrow-color-variant-for-side('right', (
        'background': var(----body--background),
        'border-color': var(----border-right-color)
    ));
}