/**
 * Copyright (c) Enalean, 2012-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";

.cards {
    margin: 0;
    padding: 0;
    list-style: none;

    .cards {
        margin: 0 0 0 2em;
    }
}

.card {
    position: relative;
    min-width: 200px;
    height: 100%;
    margin-bottom: 1em;
    padding: 0 0 0 5px;
    border: 1px solid #b2b39d;
    background: #ffffee;
    color: #333333;

    &.placeholder {
        border: 1px dashed #3a87ad;
        background: url("../../../../../../src/www/themes/common/images/backstripes.gif");
    }
}

.card,
.card-preview {
    @each $color-name, $colors in tlp-swatch-colors.$color-map {
        &.card-style-#{$color-name} {
            border-color: map.get($colors, "border");
            background: map.get($colors, "secondary");

            > .card-container {
                background: map.get($colors, "secondary");
            }

            .card-accessibility {
                opacity: 0.5;
                background-color: map.get($colors, "text");
                mask-image: url("#{map.get($colors, 'pattern')}");
            }

            .card-actions {
                a.dropdown-toggle {
                    color: map.get($colors, "text");
                }

                .caret {
                    border-top-color: map.get($colors, "text");
                }
            }

            .card-details {
                > .toggler,
                > .toggler-hide,
                > .toggler-hide-noajax,
                > .toggler-noajax,
                tr td:first-child {
                    color: map.get($colors, "text");
                }
            }
        }
    }
}

@each $color-name, $colors in tlp-swatch-colors.$color-map {
    // Specificity added to win over .card.card-style-$color
    div.card.card-accent-#{$color-name} {
        background: map.get($colors, "primary");
    }

    .card-type-border-#{$color-name} {
        flex: 0 0 auto;
        width: 4px;
        border-top-left-radius: var(--tlp-medium-radius);
        border-bottom-left-radius: var(--tlp-medium-radius);
        background: map.get($colors, "primary");
    }
}

.card-accessibility {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
}

.card-container {
    position: relative;
    height: 100%;
    min-height: 50px;
    padding: 0.25em 20px 0.25em 0.5em;
    border-top-right-radius: var(--tlp-medium-radius);
    border-bottom-right-radius: var(--tlp-medium-radius);
    background: #ffffbb;
}

.card-actions {
    /* stylelint-disable-next-line selector-no-qualifying-type */
    a.dropdown-toggle {
        color: #7d7d7d;
        font-size: 0.9em;

        &:hover {
            opacity: 0.7;
            text-decoration: none;
        }
    }

    ul {
        padding: 0.25em 0.5em;
        list-style: none;
    }

    &:hover .caret {
        opacity: 0.7;
    }

    .dropdown.open .dropdown-toggle {
        background: none;
        color: #005580;
    }
}

.card-title {
    margin: 5px 0;
    text-align: center;
}

.card-details {
    color: #444444;

    > .toggler,
    > .toggler-hide,
    > .toggler-hide-noajax,
    > .toggler-noajax {
        padding-left: 0;
        background-image: none;
        color: #808080;
        font-size: 0.9em;
    }

    .toggler,
    .toggler-noajax,
    .toggler-hide,
    .toggler-hide-noajax {
        &::before {
            content: "";
        }
    }

    > .toggler:hover,
    > .toggler-hide:hover,
    > .toggler-hide-noajax:hover,
    > .toggler-noajax:hover {
        color: #333333;
    }

    > .toggler-hide > .fa-caret-down,
    > .toggler-hide-noajax > .fa-caret-down {
        display: none;
    }

    > .toggler > .fa-caret-right,
    > .toggler-noajax > .fa-caret-right {
        display: none;
    }

    tr td {
        font-size: 0.8em;

        &:first-child {
            text-align: right;
            vertical-align: top;
        }

        ul,
        ol {
            margin: 0 20px;

            li {
                list-style: disc outside none;
            }
        }
    }

    .avatar {
        display: inline-block;
        position: relative;
        top: -2px;
        left: 1px;
        width: 25px;
        height: 25px;
        border: 0;

        > img {
            width: 25px;
            height: 25px;
        }
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .autocomputed_override {
        display: none;
    }
}
