@import (once) "../../include/vars";

:root {
    --popover-border-radius: 6px;
    --popover-background: #ffffff;
    --popover-color: #191919;
    --popover-border-color: #e8e8e8;
}

.dark-side {
    --popover-background: #1e1f22;
    --popover-color: #dbdfe7;    
    --popover-border-color: #4a4d51;
}

.popover {
    display: block;
    min-width: 12.5rem;
    height: auto;
    position: fixed;
    background-color: var(--popover-background);
    color: var(--popover-color);
    z-index: @z-index-popover;
    border: 1px solid var(--popover-border-color);
    border-radius: var(--popover-border-radius);
    cursor: default;
    padding: 1rem;
    max-width: calc(100% - 32px);

    & > * {
        max-width: 100%;
    }

    .popover-content {
        display: block;
        position: relative;
        z-index: 50;
    }

    .popover-close-button {
        z-index: 100;
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: 26px;
        background: var(--color-red);
        color: #fff;
    }
}