/**
 * Copyright (c) Enalean, 2018 - Present. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@use "sass:math";

$tlp-popover-radius: var(--tlp-large-radius);
$tlp-popover-arrow-size: 14px;
$tlp-popover-hover-transition-show: 75ms ease-out 500ms;
$tlp-popover-hover-transition-hide: 75ms ease-out 250ms;
$tlp-popover-click-transition: 75ms ease-out;

.tlp-popover {
    display: none;
    position: absolute;
    z-index: 1000;
    flex-direction: column;
    width: 400px;
    transition:
        opacity $tlp-popover-hover-transition-hide,
        box-shadow $tlp-popover-hover-transition-hide;
    border-radius: $tlp-popover-radius;
    box-shadow: none;
    pointer-events: none;

    &.tlp-popover-shown {
        display: flex;
        transform: translateY(0);
        transition:
            opacity $tlp-popover-hover-transition-show,
            box-shadow $tlp-popover-hover-transition-show;
        box-shadow: var(--tlp-flyover-shadow);
        pointer-events: auto;
    }

    &[data-popover-trigger="click"] {
        transition:
            opacity $tlp-popover-click-transition,
            box-shadow $tlp-popover-click-transition;

        &.tlp-popover-shown {
            transition:
                opacity $tlp-popover-click-transition,
                box-shadow $tlp-popover-click-transition;
        }
    }
}

.tlp-popover-dark {
    h1,
    h2,
    h3,
    a,
    blockquote,
    code {
        color: var(--tlp-typo-default-text-color-on-dark-background);
    }

    pre,
    code {
        background-color: var(--tlp-white-color-transparent-90);
        white-space: unset;
    }

    pre > code {
        background-color: transparent;
    }

    pre,
    blockquote {
        border-color: var(--tlp-neutral-normal-color);
    }

    > .tlp-popover-header,
    > .tlp-popover-header > .tlp-popover-title {
        background: var(--tlp-dark-color-darker-20);
        color: var(--tlp-typo-default-text-color-on-dark-background);
    }

    > .tlp-popover-header {
        border-bottom: 1px solid rgb(104 122 124 / 20%);
    }

    > .tlp-popover-body {
        border-bottom: unset;
        background-color: var(--tlp-dark-color);
        color: var(--tlp-typo-default-text-color-on-dark-background);
    }
}

.tlp-popover-dark > .tlp-popover-arrow::after {
    background: var(--tlp-dark-color);
}

.tlp-popover-dark[data-popover-placement^="right-start"] > .tlp-popover-arrow::after,
.tlp-popover-dark[data-popover-placement^="left-start"] > .tlp-popover-arrow::after,
.tlp-popover-dark[data-popover-placement^="bottom-start"] > .tlp-popover-arrow::after,
.tlp-popover-dark[data-popover-placement^="bottom-end"] > .tlp-popover-arrow::after,
.tlp-popover-dark[data-popover-placement^="bottom"] > .tlp-popover-arrow::after {
    background: var(--tlp-dark-color-darker-20);
}

.tlp-popover-header {
    display: flex;
    z-index: 1;
    align-items: center;
    padding: calc(var(--tlp-small-spacing) * 1.5) var(--tlp-medium-spacing);
    border-bottom: 1px solid var(--tlp-neutral-light-color);
    border-top-left-radius: $tlp-popover-radius;
    border-top-right-radius: $tlp-popover-radius;
    background: var(--tlp-white-color);
}

.tlp-popover-title {
    margin: 0;
    color: var(--tlp-dark-color);
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: none;

    &::before {
        margin-right: var(--tlp-small-spacing);
        font-family: "Font Awesome 6 Free";
        font-size: 0.875rem;
    }
}

.tlp-popover-body {
    z-index: 1;
    padding: calc(var(--tlp-small-spacing) * 1.5) var(--tlp-medium-spacing);
    background: var(--tlp-white-color);
    color: var(--tlp-dark-color);
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.25rem;
    text-align: left;

    &:nth-child(2):last-child {
        border-radius: $tlp-popover-radius;
    }

    &:last-child {
        border-bottom-right-radius: $tlp-popover-radius;
        border-bottom-left-radius: $tlp-popover-radius;
    }
}

.tlp-popover-footer {
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--tlp-small-spacing) * 1.5) var(--tlp-medium-spacing);
    border-top: 1px solid var(--tlp-neutral-light-color);
    border-bottom-right-radius: $tlp-popover-radius;
    border-bottom-left-radius: $tlp-popover-radius;
    background: var(--tlp-white-color);

    > button {
        margin: 0 0 0 var(--tlp-small-spacing);
    }
}

.tlp-popover-arrow {
    position: absolute;
    z-index: -1;
    width: $tlp-popover-arrow-size;
    height: $tlp-popover-arrow-size;

    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        transform: rotate(45deg);
    }

    &::before {
        background: var(--tlp-dark-color-transparent-90);
    }

    &::after {
        background: var(--tlp-white-color);
    }
}

.tlp-popover-info {
    &.tlp-popover-dark > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-info-color-on-dark-background);
    }

    > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-info-dark-color);

        &::before {
            content: "\f05a"; // fa-info-circle
            font-weight: 900;
        }
    }
}

.tlp-popover-success {
    &.tlp-popover-dark > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-success-color-on-dark-background);
    }

    > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-success-dark-color);

        &::before {
            content: "\f164"; // fa-thumbs-up
            font-weight: 900;
        }
    }
}

.tlp-popover-warning {
    &.tlp-popover-dark > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-warning-color-on-dark-background);
    }

    > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-warning-dark-color);

        &::before {
            content: "\f071"; // fa-exclamation-triangle
            font-weight: 900;
        }
    }
}

.tlp-popover-danger {
    &.tlp-popover-dark > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-danger-color-on-dark-background);
    }

    > .tlp-popover-header > .tlp-popover-title {
        color: var(--tlp-danger-dark-color);

        &::before {
            content: "\f06a"; // fa-exclamation-circle
            font-weight: 900;
        }
    }
}

.tlp-popover[data-popover-placement^="top"] {
    > .tlp-popover-arrow {
        bottom: -(math.div($tlp-popover-arrow-size, 2) + 1);

        &::after {
            top: -1px;
        }
    }

    &.tlp-popover-shown {
        transform: translateY(-#{math.div($tlp-popover-arrow-size, 2) + 1});
    }
}

.tlp-popover[data-popover-placement^="bottom"] {
    > .tlp-popover-arrow {
        top: -(math.div($tlp-popover-arrow-size, 2) + 1);

        &::after {
            top: 1px;
        }
    }

    &.tlp-popover-shown {
        transform: translateY(#{math.div($tlp-popover-arrow-size, 2) + 1});
    }
}

.tlp-popover[data-popover-placement^="right"] {
    > .tlp-popover-arrow {
        left: -(math.div($tlp-popover-arrow-size, 2) + 1);

        &::after {
            left: 1px;
        }
    }

    &.tlp-popover-shown {
        transform: translateX(#{math.div($tlp-popover-arrow-size, 2) + 1});
    }
}

.tlp-popover[data-popover-placement^="left"] {
    > .tlp-popover-arrow {
        right: -(math.div($tlp-popover-arrow-size, 2) + 1);

        &::after {
            right: 1px;
        }
    }

    &.tlp-popover-shown {
        transform: translateX(-#{math.div($tlp-popover-arrow-size, 2) + 1});
    }
}
