div[data-monster-role=popper] {
    box-sizing: border-box;
    display: none;
    padding: 1.1em;
    z-index: var(--monster-z-index-modal);
    background: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);
    border-radius: var(--monster-border-radius);
    border-width: var(--monster-border-width);
    border-style: var(--monster-border-style);
    border-color: var(--monster-bg-color-primary-4);
    box-shadow: var(--monster-box-shadow-1);
}

[data-popper-arrow],
[data-popper-arrow]::before {
    position: absolute;
    width: calc(2 * max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance)));   
    height: calc(2 * max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance)));
    background: inherit;
}

[data-popper-arrow] {
    visibility: hidden;
}

[data-popper-arrow]::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
    box-sizing: border-box;
}

div[data-popper-placement^='top'] > [data-popper-arrow] {
    bottom: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width)) / 2 );
}

div[data-popper-placement^='top'] > [data-popper-arrow]:before {
    border-left: transparent;
    border-right: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-bottom: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-top: transparent;
}

div[data-popper-placement^='bottom'] > [data-popper-arrow] {
    top: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width))  );
}

div[data-popper-placement^='bottom'] > [data-popper-arrow]:before {
    border-right: transparent;
    border-left: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-top: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-bottom: transparent;
}

div[data-popper-placement^='left'] > [data-popper-arrow] {
    right: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width))  );
}

div[data-popper-placement^='left'] > [data-popper-arrow]:before {
    border-left: transparent;
    border-right: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-top: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-bottom: transparent;
}

div[data-popper-placement^='right'] > [data-popper-arrow] {
    left: calc( var(--monster-popper-witharrrow-distance) - calc( var(--monster-border-width)) / 2 );
}

div[data-popper-placement^='right'] > [data-popper-arrow]:before {
    border-right: transparent;
    border-left: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-bottom: var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);
    border-top: transparent;
}