@use '../../scss/config.scss' as *;

.popover {
    @include spacing(m0, p-default);
    @include layer(modal);
    @include visibility(block, 0);
    @include border(primary-50);
    @include background(primary-70);
    @include typography(primary);
    @include border-radius(md);
    @include size(w300px);
    @include position('t-100%');
    @include transition();

    transform: translateY(-5px);
    pointer-events: none;
    will-change: transform, opacity;

    &.transparent {
        @include spacing(p0);
        @include background(transparent);
        @include border(0);
    }

    &[data-no-transition] {
        @include transition(none);
    }

    &[data-show="true"] {
        @include visibility(1);

        transform: translateY(0);
        pointer-events: all;
    }

    &[data-position="top"] {
        transform: translateY(5px);

        &[data-show="true"] {
            transform: translate(0);
        }
    }

    &[data-position="left"] {
        transform: translateY(0) translateX(5px);

        &[data-show="true"] {
            transform: translate(0);
        }
    }


    &[data-position="right"] {
        transform: translateY(0) translateX(-5px);

        &[data-show="true"] {
            transform: translate(0);
        }
    }
}