@import '../../style';

@mixin mk-popover() {
    $arrow-size: nb-theme(popover-arrow-size);

    border: 0 solid nb-theme(popover-border-color);
    border-radius: nb-theme(popover-border-radius);
    background: nb-theme(popover-background-color);
    box-shadow: nb-theme(popover-shadow);

    .primitive-overlay {
        color: nb-theme(popover-text-color);
        font-family: nb-theme(popover-text-font-family);
        font-size: nb-theme(popover-text-font-size);
        font-weight: nb-theme(popover-text-font-weight);
        line-height: nb-theme(popover-text-line-height);
        padding: nb-theme(popover-padding);
    }

    .mk-arrow {
        border-left: $arrow-size solid transparent;
        border-right: $arrow-size solid transparent;
        border-bottom: $arrow-size solid nb-theme(popover-border-color);

        &::after {
            position: absolute;
            content: ' ';
            width: 0;
            height: 0;
            top: 3px;
            left: calc(50% - #{$arrow-size});
            border-left: $arrow-size solid transparent;
            border-right: $arrow-size solid transparent;
            border-bottom: $arrow-size solid nb-theme(popover-background-color);
            clip-path: inset(0 0 2px);
        }
    }

    &.nb-overlay-bottom .mk-arrow {
        top: calc(-1 * #{$arrow-size} + 1px);
        left: calc(50% - #{$arrow-size});
    }

    &.nb-overlay-left .mk-arrow {
        right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
        top: calc(50% - #{$arrow-size / 2});
        transform: rotate(90deg);
    }

    &.nb-overlay-top .mk-arrow {
        bottom: calc(-1 * #{$arrow-size} + 1px);
        left: calc(50% - #{$arrow-size});
        transform: rotate(180deg);
    }

    &.nb-overlay-right .mk-arrow {
        left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
        top: calc(50% - #{$arrow-size / 2});
        transform: rotate(270deg);
    }
}

::ng-deep {
    mk-popover {
        @include mk-popover();
    }
}

::ng-deep {
    mk-error-popover {
        @include mk-popover();
        background: nb-theme(color-danger-200);
        .mk-arrow::after {
            border-bottom-color: nb-theme(color-danger-200);
        }
    }
}

:host {
    .mk-arrow {
        position: absolute;
        width: 0;
        height: 0;
    }
}