/**
 * Copyright (c) Enalean, 2020-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:map";
@use "pkg:@tuleap/tlp-swatch-colors";

.codendi-tooltip {
    position: absolute;
    z-index: 100051;
    margin: var(--tlp-medium-spacing) 0 0;
    padding: var(--tlp-medium-spacing);
    border-radius: var(--tlp-large-radius);
    background-color: var(--tlp-dark-color);
    box-shadow: var(--tlp-flyover-shadow);
    color: var(--tlp-white-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;

    &::before {
        content: "";
        position: absolute;
        top: -10px;
        left: var(--tlp-small-spacing);
        width: 0;
        height: 0;
        border-width: 0 10px 10px;
        border-style: solid;
        border-color: transparent transparent var(--tlp-dark-color) transparent;
    }

    > table > tbody > tr {
        > td {
            padding: 0 0 var(--tlp-small-spacing);
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            vertical-align: top;
        }

        &:last-child > td {
            padding: 0;
        }
    }
}

.cross-ref-tooltip-collection {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 calc(-1 * var(--tlp-small-spacing));

    > img {
        margin: 0 var(--tlp-small-spacing) var(--tlp-small-spacing) 0;
        object-fit: cover;
    }

    > .cross-ref-tooltip-collection-item {
        flex: 0 0 auto;
        width: 150px;
        margin: 0 var(--tlp-small-spacing) var(--tlp-small-spacing) 0;
        text-align: center;

        > .fa {
            margin: var(--tlp-small-spacing) 0;
            font-size: 26px;
        }

        > p {
            font-size: inherit;
            line-height: inherit;
            word-break: break-all;
        }
    }
}

.crossref-tooltip {
    padding: 0;

    &::before {
        border-color: transparent transparent var(--tlp-dark-color-darker-20) transparent;
    }

    &[class*="tlp-swatch-"] {
        &::before {
            border-color: transparent transparent var(--border-color) transparent;
        }

        > .crossref-tooltip-header,
        > .crossref-tooltip-body {
            border-top: 4px solid var(--border-color);
            border-top-left-radius: var(--tlp-large-radius);
            border-top-right-radius: var(--tlp-large-radius);
        }

        > .crossref-tooltip-header + .crossref-tooltip-body {
            border-top: 0;
        }
    }
}

.crossref-tooltip-header {
    display: flex;
    align-items: center;
    padding: var(--tlp-medium-spacing);
    border-top-left-radius: var(--tlp-large-radius);
    border-top-right-radius: var(--tlp-large-radius);
    background: var(--tlp-dark-color-darker-20);
    font-size: 16px;
    line-height: 20px;

    &:last-child {
        border-radius: var(--tlp-large-radius);
    }
}

.crossref-tooltip-header-prefix-icon {
    flex: 0 0 auto;
    margin: 0 var(--tlp-small-spacing) 0 0;
}

.crossref-tooltip-header-prefix-xref-and-title {
    font-size: 0.875rem;
    line-height: 1.125rem;
}

.crossref-tooltip-header-prefix-xref {
    display: block;
    margin: 0 0 2px;
    color: var(--text-on-dark-color);
    font-size: 0.625rem;
    line-height: 0.75rem;
}

.crossref-tooltip-body {
    padding: var(--tlp-medium-spacing);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;

    > table > tbody > tr {
        > th {
            padding: 0 var(--tlp-small-spacing) 0 0;
            color: var(--tlp-dimmed-color-on-dark-background);
            font-weight: 600;
            text-align: right;
            vertical-align: top;
        }

        > td {
            padding: 0;
            color: var(--tlp-white-color);
            font-weight: 600;
            vertical-align: top;

            /* stylelint-disable-next-line selector-no-qualifying-type */
            &.crossref-tooltip-value-undefined {
                font-weight: 400;
            }

            /* stylelint-disable-next-line selector-no-qualifying-type */
            &.crossref-tooltip-value-error {
                color: var(--tlp-danger-color-on-dark-background);
            }
        }
    }

    label {
        display: block;
        margin: 0 var(--tlp-small-spacing) 0 0;
        color: var(--tlp-dimmed-color-on-dark-background);
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        text-align: right;
        white-space: nowrap;
    }
}

.crossref-tooltip-body-table-value {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: var(--tlp-small-spacing) 0;
        color: var(--tlp-white-color);
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.64em;
    }

    h3 {
        font-size: 1.48em;
    }

    h4 {
        font-size: 1.32em;
    }

    h5 {
        font-size: 1.16em;
    }

    h6 {
        font-size: 1em;
    }
}

.crossref-tooltip-header-user-name {
    color: var(--tlp-dimmed-color-on-dark-background);
    font-size: 12px;
    line-height: 12px;
}

.crossref-tooltip-value-error {
    color: var(--tlp-danger-color-on-dark-background);
}

.crossref-tooltip-value-undefined {
    color: var(--tlp-dimmed-color-on-dark-background);
}

@each $color-name, $colors in tlp-swatch-colors.$color-map {
    .crossref-tooltip-header-prefix-circle-#{$color-name} {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: map.get($colors, "primary");
        color: var(--tlp-white-color);
    }
}
