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

$cross-ref-badge-radius: 15px;
$cross-ref-badge-font-size: 0.75rem;
$cross-ref-badge-line-height: 0.75rem;
$cross-ref-badge-font-weight: 600;
$cross-ref-badge-padding: calc(5px - 1px * var(--tlp-is-condensed)) var(--tlp-small-spacing);

.cross-ref-badge {
    display: inline-block;
    padding: $cross-ref-badge-padding;
    border: 1px solid var(--border-color, transparent);
    border-radius: $cross-ref-badge-radius;
    background: var(--secondary-color);
    color: var(--text-color, var(--tlp-white-color));
    font-size: $cross-ref-badge-font-size;
    font-weight: $cross-ref-badge-font-weight;
    line-height: $cross-ref-badge-line-height;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;

    &:hover {
        text-decoration: none;
    }

    &.cross-ref-badge-on-dark-background {
        font-weight: 400;
    }
}

.cross-ref-badge-icon {
    margin: 0 5px 0 0;
    font-size: 0.625rem;
}

@each $color-name, $colors in tlp-swatch-colors.$color-map {
    // override tlp-swatch-colors
    .cross-ref-badge-on-dark-background.tlp-swatch-#{$color-name} {
        --border-color: #{color.mix(map.get($colors, "primary"), #ffffff, 85%)};
        --secondary-color: #{color.adjust(map.get($colors, "primary"), $alpha: - 0.85)};
        --text-color: #{color.mix(map.get($colors, "border"), #ffffff, 90%)};

        @if $color-name ==
            "teddy-brown" or
            $color-name ==
            "plum-crazy" or
            $color-name ==
            "red-wine" or
            $color-name ==
            "army-green"
        {
            --text-color: #{color.mix(map.get($colors, "border"), #ffffff, 70%)};
        }
    }
}
