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

$milestone-background: var(--project-color-background-gradient-light, var(--tlp-white-color));

.milestone {
    margin: 0 0 var(--tlp-small-spacing);
    border: 1px solid var(--project-color-border, var(--tlp-neutral-normal-color));
    background: $milestone-background;
}

$border-element-separator: 1px solid var(--project-color-border, var(--tlp-white-color-darker-02));

.milestone-header {
    display: flex;
    position: sticky;
    z-index: 3;
    top: 44px;
    align-items: center;
    transition: background 0.1s linear;
    border-bottom: $border-element-separator;
    border-radius: var(--tlp-large-radius);
    background: $milestone-background;
    color: var(--project-color, var(--tlp-dimmed-color));
    cursor: pointer;

    &:hover {
        transition: background 0.1s linear;
        background: var(
            --project-color-background-gradient-light-hover,
            var(--tlp-white-color-darker-02)
        );
    }
}

.collapsed .milestone-header {
    border-bottom: 0;
}

.milestone-header-label {
    flex: 0 1 auto;
    color: var(--project-color, var(--tlp-dimmed-color));
}

.milestone-action-button {
    margin: 0 0 0 var(--tlp-small-spacing);

    &.ng-enter {
        animation: fadeIn 0.2s;
    }

    &.ng-leave {
        animation: fadeOut 0.2s;
    }
}

.milestone-header-spacer {
    flex: 1 1 auto;
    min-width: var(--tlp-medium-spacing);
}

.milestone-header-dates {
    flex: 0 0 auto;
    color: var(--project-color, var(--tlp-dimmed-color));
    font-size: 12px;
}

.milestone-header-status {
    margin: 0 0 0 var(--tlp-small-spacing);
}

.milestone-info {
    display: flex;
    align-items: center;
    padding: var(--tlp-small-spacing) var(--tlp-medium-spacing);
    border-bottom: $border-element-separator;
    background: var(--project-color-background-gradient, var(--tlp-white-color-darker-02));
}

.milestone-info-badge {
    margin: 0 5px 0 0;
}

.milestone-spacer {
    flex: 1 1 auto;
}

.milestone-info-link {
    margin: 0 0 0 15px;
    font-size: 14px;
    white-space: nowrap;

    @media screen and (max-width: 1400px) {
        > span {
            display: none;
        }
    }
}

.milestone-info-link-icon {
    margin: 0 5px 0 0;
    font-size: 12px;
    text-decoration: none;
}

@media screen and (max-width: 1400px) {
    .milestone-info-link-icon {
        margin: 0;
        font-size: 14px;
    }
}

.milestone-content {
    position: relative;
    border-radius: 0 0 var(--tlp-large-radius) var(--tlp-large-radius);
    background: var(--project-color-background-gradient, var(--tlp-white-color));
}

.milestone-backlog-items {
    min-height: 70px;
    padding: var(--tlp-medium-spacing);
    border: 1px solid var(--tlp-neutral-normal-color);
    border-radius: var(--tlp-medium-radius);
    background: var(--tlp-background-color-lighter-02);
}

.empty-milestone {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translate(-50%, 100%);
    fill: var(--tlp-main-color-transparent-80);
}

.milestone-content-loading {
    @extend %loader;
}

.external-milestone {
    display: flex;
    flex-direction: column;
}
