.popover {
    // popover var
    --rocket-ui-popover-background-color: var(--rocket-color-primary-400);

    // title`s vars
    --rocket-ui-popover-title-color: var(--rocket-color-grey-200);
    --rocket-ui-popover-title-border-color: var(--rocket-color-white-a-100);

    // popover`s content var
    --rocket-ui-popover-text-color: var(--rocket-color-white-base);

    $this: &;

    display: none;
    max-width: 20rem;
    padding: $rocket-spacing-size-3;
    background: var(--rocket-ui-popover-background-color);
    border-radius: var(--rocket-components-border-radius);
    box-shadow: $rocket-shadow-lg;

    &::after {
        @include size(1rem);

        position: absolute;
        z-index: -1;
        display: block;
        background-color: inherit;
        border-radius: var(--rocket-components-border-radius);
        transform: rotate(45deg);
        content: '';
    }

    &[data-popper-placement^='top']::after {
        bottom: -0.375rem;
        left: calc(50% - 0.5rem);
    }

    &[data-popper-placement^='bottom']::after {
        top: -0.375rem;
        left: calc(50% - 0.5rem);
    }

    &[data-popper-placement^='left']::after {
        top: calc(50% - 0.5rem);
        right: -0.375rem;
    }

    &[data-popper-placement^='right']::after {
        top: calc(50% - 0.5rem);
        left: -0.375rem;
    }

    &__title {
        @extend %base-styles-text-sm;

        margin-bottom: 0.375rem;
        padding-bottom: 0.375rem;
        color: var(--rocket-ui-popover-title-color);
        font-weight: 500;
        border-bottom: 1px solid var(--rocket-ui-popover-title-border-color);
    }

    &__text {
        @extend %base-styles-text-xs;

        color: var(--rocket-ui-popover-text-color);
    }

    &__panel-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-top: $rocket-spacing-size-3;
        column-gap: $rocket-spacing-size-2;
        row-gap: $rocket-spacing-size-2;
    }

    &--visible {
        z-index: 2;
        display: block;
    }

    &--dark {
        --rocket-ui-popover-background-color: var(--rocket-color-grey-700);
        --rocket-ui-popover-title-border-color: var(--rocket-color-white-a-100);
    }

    &--light {
        --rocket-ui-popover-background-color: var(--rocket-color-white-base);
        --rocket-ui-popover-title-color: var(--rocket-color-grey-700);
        --rocket-ui-popover-text-color: var(--rocket-color-grey-600);
    }
}