@import "dxHelpers/reset";

:host {
    --popover-border-radius: var(
        --dx-c-popover-border-radius,
        var(--dx-g-spacing-sm)
    );
    --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
    --popover-padding: var(--dx-c-popover-padding, --dx-g-spacing-sm);
}

.popover-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
    visibility: hidden;
    pointer-events: none;
}

.popover {
    background: white;
    border: var(--popover-border);
    box-shadow: var(--dx-g-box-shadow-lg);
    border-radius: var(--popover-border-radius);
    width: 168px;
    max-width: calc(100vw - var(--dx-g-spacing-lg));
    max-height: 65vh;
    padding: var(--popover-padding);
    overflow-y: auto;
    transition: var(--popover-transition);
    transition-delay: 0.02s;
    transform: translateY(var(--dx-g-spacing-xs));
    opacity: 0;
}

.popover-container_open {
    visibility: visible;
    pointer-events: auto;
}

.popover-container_open .popover {
    opacity: 1;
    transform: var(--popover-container-open-transform);
}

.popover-overridewidth {
    max-width: unset;
}

.popover-fullwidth {
    width: unset;
    max-width: unset;
}

.popover-offset-small {
    margin-top: var(--dx-g-spacing-sm);
}

.popover-offset-medium {
    margin-top: var(--dx-g-spacing-md);
}

.popover-small {
    width: 136px;
}

.popover-arrow {
    position: absolute;

    /* Weird spacing here to satisfy our linter */
    background: linear-gradient(
        315deg,
        transparent 4px,
        white 4px
    ); /* make only top half of rotated square visible */

    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    border: var(--popover-border);
    border-bottom: transparent;
    border-right: transparent;
    box-shadow: var(--dx-g-box-shadow-lg);
    transition: opacity 0.2s linear, transform 0.2s linear;
    transition-delay: 0.02s;
    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
}