/**
 * Copyright (c) Enalean, 2017-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-dropdown";
@use "pkg:dragula/dist/dragula";
@use "includes/dashboard-widgets";
@use "includes/dashboard-project";
@use "includes/dashboard-user";

.dashboard-tabs-dropdown {
    margin: 0 0 0 var(--tlp-small-spacing);
}

#dashboard-tabs-dropdown-trigger {
    transition: color 100ms;
    color: var(--tlp-neutral-dark-color-darker-10);
    font-size: 0.8rem;

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

.dashboard-widgets-container {
    padding: calc(var(--tlp-small-spacing) / 2) 0;
}

@keyframes shake-widget {
    0% {
        transform: rotate(-0.2deg);
    }

    50% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0.2deg);
    }
}

#dashboard-layout-dropdown-template {
    display: none;
}

.dashboard-widgets-row {
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: row;
    align-items: flex-start;
    padding: calc(var(--tlp-medium-spacing) / 2) 0;
    transition: box-shadow 100ms;

    &.shake-widgets {
        .dashboard-widget {
            animation: 100ms infinite alternate shake-widget;
            border-right: 0;
            border-bottom: 0;
            border-left: 0;
            box-shadow: var(--tlp-flyover-shadow);
        }
    }

    > .dashboard-row-dropdown {
        position: absolute;
        top: -13px;
        right: var(--tlp-medium-spacing);
        transition: opacity 100ms;
        opacity: 0;
    }

    &:hover {
        > .dashboard-row-dropdown {
            opacity: 1;
        }
    }

    > span:first-of-type,
    > span:last-of-type {
        padding: 0 7.5px;
    }
}

.dashboard-widgets-empty-line {
    display: flex;
    flex-direction: row;
    padding: calc(var(--tlp-small-spacing) / 2);
}

.dashboard-widgets-column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    width: calc(100% / 3);
    padding: 0 calc(var(--tlp-small-spacing) / 2);

    > :last-child {
        margin-bottom: 0;
    }
}

.dashboard-widgets-empty-column {
    align-self: stretch;
    padding: 0 calc(var(--tlp-small-spacing) / 2);
}

.dashboard-row-dropdown.shown {
    opacity: 1;
}

.dashboard-row-dropdown-button {
    cursor: pointer;

    > .dashboard-row-dropdown-path {
        transition: fill 100ms;
        fill: var(--tlp-dimmed-color-transparent-50);
    }

    &:hover {
        > .dashboard-row-dropdown-path {
            fill: var(--tlp-main-color);
        }
    }
}

.dashboard-dropdown-too-many-columns-layout.hidden {
    display: none;
}

.dashboard-dropdown-layout-field-path {
    transition: fill 100ms;
    fill: var(--tlp-dimmed-color-transparent-50);

    &.selected {
        fill: var(--tlp-main-color);
    }
}

/* stylelint-disable selector-no-qualifying-type */
body.gu-unselectable {
    $placeholder-width: 3px;
    $placeholder-height: 3px;
    $placeholder-radius: 10px;

    @keyframes column-wave {
        0% {
            height: $placeholder-height;
            opacity: 0.5;
            box-shadow: 0 0 0 0 var(--tlp-main-color-transparent-50);
        }

        50% {
            height: $placeholder-height * 4;
            opacity: 1;
            box-shadow: 0 0 0 6px transparent;
        }

        100% {
            height: $placeholder-height;
            opacity: 0.5;
            box-shadow: 0 0 0 0 transparent;
        }
    }

    @keyframes row-wave {
        0% {
            width: $placeholder-width;
            opacity: 0.5;
            box-shadow: 0 0 0 0 var(--tlp-main-color-transparent-50);
        }

        50% {
            width: $placeholder-width * 4;
            opacity: 1;
            box-shadow: 0 0 0 6px transparent;
        }

        100% {
            width: $placeholder-width;
            opacity: 0.5;
            box-shadow: 0 0 0 0 transparent;
        }
    }

    @mixin widget-placeholder($top, $bottom, $left, $direction) {
        content: "";
        position: absolute;
        top: $top;
        bottom: $bottom;
        left: $left;
        transform: translate(-50%, -50%);
        border-radius: $placeholder-radius;
        background: var(--tlp-main-color);

        @if $direction == "column" {
            width: $placeholder-height;
            height: $placeholder-width;
            animation: 1.5s ease-in-out infinite column-wave;
        } @else {
            width: $placeholder-width;
            height: $placeholder-height;
            animation: 1.5s ease-in-out infinite row-wave;
        }
    }

    .dashboard-widgets-empty-line,
    .dashboard-widgets-empty-column,
    .dashboard-widgets-line,
    .dashboard-widgets-column {
        position: relative;
    }

    .dashboard-widgets-empty-line:empty::before {
        @include widget-placeholder(50%, auto, 50%, "row");
    }

    .dashboard-widgets-empty-column:empty::before {
        @include widget-placeholder(50%, auto, 50%, "column");
    }

    .dashboard-widgets-row:not(.one-column) .dashboard-widget:not(.gu-mirror, .gu-transit) {
        position: relative;

        &::after {
            @include widget-placeholder(auto, -14px, 50%, "row");
        }

        &:first-child::before {
            @include widget-placeholder(-11px, auto, 50%, "row");
        }
    }
}
/* stylelint-enable */

.dashboard-dropdown-layout {
    margin: 0;
    padding: 0 var(--tlp-small-spacing) var(--tlp-small-spacing);

    &:last-child {
        padding: 0 var(--tlp-small-spacing);
    }

    &.hidden {
        display: none;
    }

    > .dashboard-dropdown-layout-field {
        display: none;
    }

    &:hover {
        .dashboard-dropdown-layout-field-path {
            fill: var(--tlp-main-color);
        }
    }
}

.dashboard-widget {
    flex: 1 1 auto;
    width: 100%;
    transition: box-shadow 100ms;

    &.gu-mirror {
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        opacity: 1;
        box-shadow: var(--tlp-flyover-shadow);
    }
}

.dashboard-widget-minimized {
    flex-grow: 0;
}

.one-column > .tlp-dropdown {
    display: none;
    pointer-events: none;
}

$nb-empty-columns-separators-in-three-columns: 4;
$nb-empty-columns-separators-in-four-columns: 5;
$empty-space-taken-in-three-columns: calc(
    #{$nb-empty-columns-separators-in-three-columns} * var(--tlp-small-spacing)
);
$empty-space-taken-in-four-columns: calc(
    #{$nb-empty-columns-separators-in-four-columns} * var(--tlp-small-spacing)
);
$grid-width-in-three-columns: calc((100% - #{$empty-space-taken-in-three-columns}) / 3);
$two-columns-span-in-three-columns: calc(
    (#{$grid-width-in-three-columns} * 2) + var(--tlp-small-spacing)
);
$grid-width-in-four-columns: calc((100% - #{$empty-space-taken-in-four-columns}) / 4);
$two-columns-span-in-four-columns: calc(
    (#{$grid-width-in-four-columns} * 2) + var(--tlp-small-spacing)
);

.two-columns-small-big {
    > div:first-of-type {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-three-columns;
    }

    > div:nth-of-type(2) {
        flex-grow: 2;
        flex-shrink: 1;
        width: $two-columns-span-in-three-columns;
    }
}

.two-columns-big-small {
    > div:first-of-type {
        flex-grow: 2;
        flex-shrink: 1;
        width: $two-columns-span-in-three-columns;
    }

    > div:nth-of-type(2) {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-three-columns;
    }
}

.three-columns-small-big-small {
    > div:first-of-type {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-four-columns;
    }

    > div:nth-of-type(2) {
        flex-grow: 1;
        flex-shrink: 1;
        width: $two-columns-span-in-four-columns;
    }

    > div:nth-of-type(3) {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-four-columns;
    }
}

.three-columns-big-small-small {
    > div:first-of-type {
        flex-grow: 1;
        flex-shrink: 1;
        width: $two-columns-span-in-four-columns;
    }

    > div:nth-of-type(2) {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-four-columns;
    }

    > div:nth-of-type(3) {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-four-columns;
    }
}

.three-columns-small-small-big {
    > div:first-of-type {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-four-columns;
    }

    > div:nth-of-type(2) {
        flex-grow: 1;
        flex-shrink: 1;
        width: $grid-width-in-four-columns;
    }

    > div:nth-of-type(3) {
        flex-grow: 1;
        flex-shrink: 1;
        width: $two-columns-span-in-four-columns;
    }
}

#add-dashboard-button {
    margin: 0 0 0 var(--tlp-medium-spacing);
}
