/**
 * Copyright (c) Enalean, 2019 - 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 "files-uploads-modal";
@use "dragndrop";

$document-upload-animation-color: var(--tlp-success-color-transparent-90);
$document-upload-animation-secondary-color: var(--tlp-success-color-transparent-95);
$progress-bar-background-color: var(--tlp-neutral-normal-color);

/* stylelint-disable selector-no-qualifying-type */
.tlp-table > tbody > tr.document-tree-item-uploading > td {
    animation: document-uploading-animation 1.2s infinite linear;
    background: linear-gradient(
            90deg,
            $document-upload-animation-color 0,
            $document-upload-animation-secondary-color 80px,
            $document-upload-animation-color 160px
        )
        repeat bottom left;
    background-size: 600px 1px;
}
/* stylelint-enable selector-no-qualifying-type */

@keyframes document-uploading-animation {
    0% {
        background-position: -160px;
    }

    40% {
        background-position: 140px;
    }

    100% {
        background-position: 440px;
    }
}

.document-dragndrop-file-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--tlp-neutral-light-color);

    &.document-dragndrop-file-upload-error {
        border-bottom: 1px solid var(--tlp-danger-color-transparent-90);
        background-color: var(--tlp-danger-color-transparent-90);
    }

    &:last-child {
        border-bottom: 0;
    }
}

/* stylelint-disable selector-no-qualifying-type */
.tlp-table > tbody > tr.document-tree-item-highlighted > td {
    border-bottom-color: var(--tlp-main-color-transparent-15);
    background: var(--tlp-main-color-transparent-15);
    color: var(--tlp-white-color);

    .document-folder-toggle {
        visibility: hidden;
    }

    .fa {
        color: var(--tlp-white-color);
    }

    .document-badge-avatar-username {
        color: var(--tlp-white-color);
    }
}

.tlp-table > tbody > tr.document-tree-item-hightlighted-forbidden > td {
    border-bottom-color: var(--tlp-danger-color-transparent-15);
    background: var(--tlp-danger-color-transparent-15);

    .document-folder-content-icon::before {
        content: "\f05e"; // fa-ban
    }
}
/* stylelint-enable selector-no-qualifying-type */

.document-file-highlighted {
    .document-folder-content-icon::after {
        transform: scale(1);
        opacity: 1;
    }
}

.document-folder-highlighted {
    .document-folder-content-icon {
        transform: rotate(90deg);
        animation: none;
        font-weight: 900;

        &::before {
            content: "\f064"; // fa-mail-forward
        }
    }
}

.document-file-upload-progress {
    display: flex;
    align-items: center;
}

.document-file-upload-cell-title {
    justify-content: space-between;
}

.document-file-upload-cell-title-content {
    display: flex;
    align-items: center;
}

.document-file-upload-fake-item-cell-title {
    display: flex;
}

.document-file-upload-progress-value {
    margin: 0 5px 0 0;
    color: var(--tlp-success-color);
    font-size: 12px;
    font-weight: 600;
}

.document-file-upload-progress-bar::-moz-progress-bar {
    border-radius: 20px;
    background: var(--tlp-success-color);
}

.document-file-upload-progress-bar::-webkit-progress-bar {
    border-radius: 20px;
    background: $progress-bar-background-color;
}

.document-file-upload-progress-bar::-webkit-progress-value {
    border-radius: 20px;
    background: var(--tlp-success-color);
}

.document-file-upload-progress-bar[value] {
    appearance: none;
    height: 5px;
}

.document-file-upload-progress-bar {
    position: relative;
    top: 1px;
    width: 100px;
    border: 0;
    border-radius: 20px;
    background: $progress-bar-background-color;
    color: var(--tlp-success-color);
    vertical-align: unset;
}

.document-file-upload-progress-cancel {
    margin: 0 0 0 var(--tlp-small-spacing);
    transition: color ease-in-out 150ms;
    color: var(--tlp-success-color);
    font-size: 15px;
    cursor: pointer;

    &:hover {
        color: var(--tlp-danger-color);
        text-decoration: none;
    }
}

.document-file-upload-progress-canceled {
    > .document-file-upload-progress-bar,
    > .document-file-upload-progress-value {
        color: var(--tlp-dimmed-color);
    }

    > .document-file-upload-progress-bar::-moz-progress-bar {
        background: var(--tlp-dimmed-color);
    }

    > .document-file-upload-progress-bar::-webkit-progress-value {
        background: var(--tlp-dimmed-color);
    }

    > .document-file-upload-progress-cancel {
        color: var(--tlp-dimmed-color);

        &:hover {
            color: var(--tlp-dimmed-color);
        }
    }
}

.document-file-upload-progress-error {
    > .document-file-upload-progress-bar,
    > .document-file-upload-progress-value {
        color: var(--tlp-danger-color);
    }

    > .document-file-upload-progress-bar::-moz-progress-bar {
        background: var(--tlp-danger-color);
    }

    > .document-file-upload-progress-bar::-webkit-progress-value {
        background: var(--tlp-danger-color);
    }
}
