@use '../styles/variables.scss';
@use '../styles/mixins/shadow.scss';

$offset: 4px;
.thy-popover-panel {
    &.thy-popover-topLeft,
    &.thy-popover-topRight,
    &.thy-popover-top {
        padding-bottom: $offset;
    }

    &.thy-popover-bottomLeft,
    &.thy-popover-bottomRight,
    &.thy-popover-bottom {
        padding-top: $offset;
    }

    &.thy-popover-left,
    &.thy-popover-leftTop,
    &.thy-popover-leftBottom {
        padding-right: $offset;
    }

    &.thy-popover-right,
    &.thy-popover-rightTop,
    &.thy-popover-rightBottom {
        padding-left: $offset;
    }
}

.thy-popover-container {
    background: variables.$bg-panel;
    width: 100%;
    border-radius: variables.$border-radius;
    @include shadow.section-box-shadow();
}

.thy-popover-header {
    padding: variables.$popover-header-padding;
    display: flex;
    flex-direction: row;
    border-bottom: solid 1px variables.$popover-divider;
    background-color: transparent;
    .thy-popover-title,
    h5 {
        flex: 1;
        display: flex;
        align-items: center;
        margin: 0;
        font-size: variables.$font-size-md;
        line-height: 20px;
        font-weight: normal;
    }
    .close {
        outline: none;
        height: 20px;
        line-height: 20px;
    }
}

.thy-popover-body {
    display: block;
    position: relative;
    padding: variables.$popover-body-padding;
}
