@use '../core/pop-up/pop-up';
@use '../core/styles/common';

@use '../core/styles/common/tokens' as *;

@use './popover-theme' as *;

$arrow-size: 12px;

$arrow-offset: calc(($arrow-size - 1px) / -2);
$arrow-padding: 24px;

.kbq-popover {
    position: relative;

    border-radius: var(--kbq-popover-size-container-border-radius);

    box-sizing: border-box;

    list-style: none;
    white-space: pre-line;

    z-index: 1;

    &.kbq-popover_small {
        width: var(--kbq-popover-size-container-width-small);

        & .kbq-popover__content_default-paddings.kbq-popover__content {
            padding: var(--kbq-size-l);
        }
    }

    &.kbq-popover_medium {
        width: var(--kbq-popover-size-container-width-medium);
    }

    &.kbq-popover_large {
        width: var(--kbq-popover-size-container-width-large);
    }

    @include pop-up.popup-margins(kbq-popover, 8px);
}

.kbq-popover__content {
    overflow-y: auto;

    &.kbq-popover__content_default-paddings {
        padding: var(--kbq-popover-size-content-padding-top) var(--kbq-popover-size-content-padding-horizontal)
            var(--kbq-popover-size-content-padding-bottom);
    }
}

.kbq-popover__container {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    max-height: var(--kbq-popover-size-container-max-height);

    border-radius: var(--kbq-popover-size-container-border-radius);

    &.kbq-popover__container_with-header {
        .kbq-popover__content_default-paddings.kbq-popover__content {
            padding-top: var(--kbq-size-s);
        }
    }

    &.kbq-popover__container_with-footer {
        .kbq-popover__content_default-paddings.kbq-popover__content {
            padding-bottom: var(--kbq-size-s);
        }
    }
}

.kbq-popover__content .kbq-popover__close-container {
    display: flex;
    justify-content: flex-end;
    height: 0;

    .kbq-popover__close {
        top: auto;
        right: auto;
        transform: translateY(-50%) translateX(50%);
    }
}

.kbq-popover__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;

    overflow: hidden;

    & .kbq-popover__header-text {
        @include common.kbq-truncate-line();
    }

    &.kbq-popover__header_default-paddings {
        padding: var(--kbq-popover-size-header-padding-top) var(--kbq-popover-size-header-padding-horizontal)
            var(--kbq-popover-size-header-padding-bottom) var(--kbq-popover-size-header-padding-horizontal);
    }
}

.kbq-popover__header_top-overflow {
    position: relative;
    z-index: 2;
    box-shadow: var(--kbq-shadow-overflow-normal-bottom);
}

.kbq-popover__header_with-close-button {
    padding-right: var(--kbq-size-4xl);
}

.kbq-popover__footer.kbq-popover__footer_default-paddings {
    padding: var(--kbq-popover-size-footer-padding-vertical) var(--kbq-popover-size-footer-padding-horizontal);
}

.kbq-popover__footer_bottom-overflow {
    position: relative;
    z-index: 2;
    box-shadow: var(--kbq-shadow-overflow-normal-top);
}

.kbq-popover__arrow {
    position: absolute;

    z-index: -1;

    width: $arrow-size;
    height: $arrow-size;

    transform: rotate(45deg);
}

@include pop-up.popup-arrow-positions(kbq-popover, $arrow-offset, $arrow-padding);

.kbq-popover__close {
    position: absolute;
    z-index: 2;
    top: var(--kbq-size-s);
    right: var(--kbq-size-s);
    border-radius: var(--kbq-size-border-radius);
}

@include kbq-popover-theme();
@include kbq-popover-typography();