/**
 * Copyright (c) Enalean, 2024-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/>.
 */

$tracker-artifact-submit-buttons-height: 80px;
$tracker-artifact-submit-buttons-concurrent-edition-height: 286px;
$tracker-artifact-followup-comments-in-concurrent-edition-padding-bottom: $tracker-artifact-submit-buttons-height +
    $tracker-artifact-submit-buttons-concurrent-edition-height;

.artifact-comment-hide {
    display: none;
}

/* stylelint-disable-next-line selector-id-pattern -- Still used in JavaScript */
#tracker_artifact_followup_comments {
    left: -12px;
    box-sizing: border-box;
    width: 960px; /* stylelint-disable-line declaration-block-no-duplicate-properties */
    width: 100%;
    margin-top: 30px;
    padding: 30px 12px $tracker-artifact-submit-buttons-height;
    border-top: 1px solid var(--tlp-neutral-normal-color);
    background: var(--tlp-fade-background-color);

    &.tracker-artifact-in-concurrent-edition {
        padding: 30px 12px $tracker-artifact-followup-comments-in-concurrent-edition-padding-bottom;
    }

    h1 {
        margin: 0 0 20px;
        color: #474747;
        font-size: 2em;
        font-weight: bold;
    }

    // To avoid to apply the generic H1 style class.
    .helper-popover-title {
        margin: 0;
        color: var(--tlp-white-color);
        font-size: 16px;
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .tracker_artifact_followup_comments_display_settings {
        position: relative;
        top: 5px;
        float: right;
    }

    /* stylelint-disable selector-class-pattern */
    &:not(.tracker_artifact_followup_comments-display_changes) {
        .tracker_artifact_followup.tracker_artifact_followup-with_changes:not(
                .tracker_artifact_followup-with_comment
            ),
        .tracker_artifact_followup.tracker_artifact_followup-priority,
        .tracker_artifact_followup.tracker_artifact_followup-by_system_user,
        .tracker_artifact_followup_changes,
        .tracker_artifact_followup_content > hr {
            display: none;
        }
    }
    /* stylelint-enable */
}

/* stylelint-disable-next-line selector-id-pattern */
#tracker_artifact_followup_comments-content {
    max-width: 960px;
}

.artifact-new-comment-section > .tracker-richtexteditor-help {
    margin-bottom: 0;
}

/* stylelint-disable-next-line selector-id-pattern -- Still used in JavaScript */
#tracker_followup_comment_new {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 5px;
}

/* stylelint-disable-next-line selector-class-pattern -- Still used in JavaScript */
.tracker_artifact_followup_comment_controls {
    position: relative;
    top: -1px;
    float: right;
    font-style: normal;

    a {
        color: #222222;

        &:hover {
            color: #444444;
            text-decoration: none;
        }
    }
}

/* stylelint-disable-next-line selector-class-pattern */
.tracker_artifact_followup_comment_body {
    margin-bottom: 5px;
    word-wrap: break-word;

    > ul {
        margin-bottom: 10px;
    }
}

.artifact-comment-edit-panel {
    display: flex;
    flex-direction: column;
}

.artifact-comment-edit-panel-actions {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
}

@keyframes yellow-highlight {
    0% {
        background-color: #ffff99;
    }

    100% {
        background-color: initial;
    }
}

.artifact-comment-highlight {
    animation: 1s linear yellow-highlight;
}
