/**
 * Copyright (c) 2017-Present Enalean
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

@use "pkg:@tuleap/burningparrot-theme/css/includes/global-variables";

%round-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

%override-button-default {
    border: 0;
    cursor: pointer;
}

%uppercase-title {
    overflow: hidden;
    font-family: var(--tlp-font-family);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.25px;
    line-height: normal;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

%background-action {
    background-color: var(--tlp-dark-color);
    // stylelint-disable-next-line function-linear-gradient-no-nonstandard-direction
    background-image: linear-gradient(
        0,
        var(--tlp-sidebar-action-background),
        var(--tlp-sidebar-action-background)
    );
    background-blend-mode: overlay;
}

%background-action-hover {
    background-color: var(--tlp-dark-color);
    // stylelint-disable-next-line function-linear-gradient-no-nonstandard-direction
    background-image: linear-gradient(
        0,
        var(--tlp-sidebar-action-background-hover),
        var(--tlp-sidebar-action-background-hover)
    );
    background-blend-mode: overlay;
}

.project-sidebar-header {
    display: flex;
    flex-direction: column;
}

.project-sidebar-header-name {
    display: flex;
    flex-direction: column;
    padding: 0 var(--tlp-medium-spacing);
}

.project-title-container {
    display: flex;
    align-items: center;
    margin: 0 0 var(--tlp-small-spacing);
}

.project-title-spacer {
    flex: 1 1 auto;
    min-width: var(--tlp-small-spacing);
}

.sidebar-dashboard-privacy-icon {
    margin: 0 var(--tlp-small-spacing) 0 0;
    color: var(--tlp-main-color-lighter-40);
    font-size: 0.6rem;
    line-height: 0;

    &.fa-tlp-lock-plus-r,
    &.fa-tlp-unlock-plus-r {
        font-size: 0.75rem;
    }
}

.project-sidebar-title {
    display: flex;
    align-items: center;
    margin: 0 0 0 calc(-1 * var(--tlp-small-spacing));
    padding: var(--tlp-small-spacing);
    border-radius: var(--tlp-large-radius);
    color: var(--tlp-white-color);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3125rem;
    text-decoration: none;
    overflow-wrap: anywhere;

    &:hover {
        @extend %background-action-hover;

        text-decoration: none;
    }

    > .project-sidebar-title-icon {
        margin: 0 calc(var(--tlp-small-spacing) / 2) 0 0;
    }
}

.project-administration-link {
    @extend %round-icon;
    @extend %background-action;

    flex: 0 0 auto;
    transition: color ease-in-out 100ms;
    color: var(--tlp-typo-default-text-color-on-dark-background);
    font-size: 0.6875rem;

    &:visited {
        color: var(--tlp-neutral-normal-color);
        text-decoration: none;
    }

    &:focus,
    &:hover {
        @extend %background-action-hover;

        color: var(--tlp-white-color);
        text-decoration: none;
    }
}

.project-sidebar-banner-button {
    @extend %override-button-default;

    display: flex;
    align-items: center;
    margin: 0 var(--tlp-small-spacing);
    padding: var(--tlp-small-spacing);
    border-radius: var(--tlp-large-radius);
    background: var(--tlp-dark-color);

    &:hover,
    &:focus {
        @extend %background-action-hover;
    }
}

.project-sidebar-banner-button-icon {
    @extend %round-icon;

    flex: 0 0 auto;
    transition: opacity ease-in-out 100ms;
    background-color: var(--tlp-warning-color);

    .fa-bullhorn {
        position: relative;
        top: -1px;
        color: var(--tlp-white-color);
        font-size: 0.6rem;
        text-shadow: 0 0 1px rgb(0 0 0 / 50%);
    }
}

.project-sidebar-banner-button-label {
    @extend %uppercase-title;

    margin: 0 0 0 var(--tlp-small-spacing);
    color: var(--tlp-warning-color);
}

.project-sidebar-project-flags {
    display: flex;
    align-items: center;
    margin: 0 var(--tlp-small-spacing);
    padding: var(--tlp-small-spacing);
    border-radius: var(--tlp-large-radius);
    color: var(--tlp-neutral-normal-color);
    cursor: help;

    &:focus {
        @extend %background-action-hover;
    }

    > .project-sidebar-project-flags-icon {
        @extend %round-icon;

        flex: 0 0 auto;
        background: var(--tlp-main-color-transparent-85);

        > .tuleap-svg {
            height: 12px;

            > path {
                fill: var(--tlp-main-color-lighter-40);
            }
        }
    }
}

.project-sidebar-project-flags-labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 0 var(--tlp-small-spacing);
}

.project-sidebar-project-flags-label {
    @extend %uppercase-title;

    max-width: 185px;
}

.project-sidebar-nav {
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--tlp-medium-spacing);
}

.project-sidebar-promoted-item-nav,
.project-sidebar-subitem-nav {
    display: flex;
    flex-direction: column;
    margin: 0 0 0 var(--tlp-large-spacing);
    border-left: 1px solid var(--tlp-neutral-normal-color-transparent-80);
}

.project-sidebar-nav-item,
.project-sidebar-nav-promoted-item,
.project-sidebar-nav-subitem {
    display: flex;
    align-items: center;
    height: global-variables.$sidebar-item-height;
    margin: 0 var(--tlp-small-spacing) 5px;
    padding: 0 var(--tlp-small-spacing);
    border-radius: var(--tlp-large-radius);
    color: var(--tlp-neutral-normal-color);
    text-decoration: none;

    &.active,
    &:focus-within {
        @extend %background-action;

        color: var(--tlp-white-color);
        text-decoration: none;
    }

    &:hover {
        @extend %background-action-hover;

        color: var(--tlp-white-color);
        text-decoration: none;

        > .project-sidebar-nav-item-info-tooltip {
            opacity: 1;
        }
    }

    &.active,
    &:focus-within,
    &:hover {
        > .project-sidebar-nav-subitem-quick-link,
        > .project-sidebar-nav-promoted-item-quick-link {
            opacity: 0.5;

            &:hover {
                opacity: 1;
            }
        }
    }

    &:hover > .project-sidebar-nav-item-new-tab {
        transform: rotate(-45deg) translate(3px, 0);
        opacity: 1;
    }
}

.project-sidebar-nav-promoted-item-link,
.project-sidebar-nav-subitem-link {
    color: var(--tlp-neutral-normal-color);
    text-decoration: none;

    &.active,
    &:focus {
        color: var(--tlp-white-color);
        text-decoration: none;
    }

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

.project-sidebar-nav-promoted-item-quick-link,
.project-sidebar-nav-subitem-quick-link {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 0 0 var(--tlp-medium-spacing);
    transition:
        opacity ease-in-out 150ms,
        color ease-in-out 150ms;
    border: 0;
    border-radius: 50%;
    opacity: 0;
    background: var(--tlp-sidebar-action-quick-link-background);
    color: var(--tlp-neutral-normal-color);
    font-size: 0.7rem;

    &:focus,
    &:hover {
        opacity: 1;
        background: var(--tlp-sidebar-action-background-hover);
        color: var(--tlp-white-color);
        text-decoration: none;
    }
}

.project-sidebar-nav-item-with-promoted-items {
    margin: 0 var(--tlp-small-spacing);
}

.project-sidebar-nav-subitem,
.project-sidebar-nav-promoted-item {
    margin: 0 var(--tlp-small-spacing);
    cursor: pointer;
}

.project-sidebar-nav-item-new-tab {
    position: relative;
    top: -7px;
    left: 3px;
    transform: rotate(-45deg);
    transition:
        transform ease-in-out 100ms,
        opacity ease-in-out 100ms;
    opacity: 0.5;
    font-size: 10px;
}

.project-sidebar-nav-item-info-tooltip {
    margin: 0 0 0 var(--tlp-small-spacing);
    transition: opacity ease-in-out 150ms;
    opacity: 0;
    color: var(--tlp-neutral-normal-color);
    font-size: 0.75rem;
}

.project-sidebar-nav-item-icon {
    flex: 0 0 auto;
    margin: 0 var(--tlp-small-spacing) 0 0;
    font-size: 0.9375rem;
}

.project-sidebar-nav-item-label,
.project-sidebar-nav-subitem-label,
.project-sidebar-nav-promoted-item-label {
    max-width: global-variables.$sidebar-expanded-width - 60px;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-collapse-button {
    @extend %override-button-default;
    @extend %round-icon;
    @extend %background-action;

    display: flex;
    margin: 0 auto var(--tlp-medium-spacing);
    color: var(--tlp-neutral-normal-color);

    &:hover,
    &:focus {
        @extend %background-action-hover;
    }
}

.sidebar-collapser-icon {
    position: relative;
    top: -1px;
    left: -1px;
    font-size: 0.7rem;
    pointer-events: none;

    &::before {
        content: "\f053"; // fa-chevron-left
    }
}

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

.project-sidebar-linked-projects {
    display: flex;
    flex-direction: column;
    margin: var(--tlp-small-spacing) var(--tlp-medium-spacing);

    > .project-sidebar-linked-projects-list {
        margin: 0 0 0 var(--tlp-x-large-spacing);
        padding: 0 0 0 var(--tlp-small-spacing);
        border-left: 1px solid var(--tlp-neutral-normal-color-transparent-80);
        list-style: none;
    }
}

.project-sidebar-linked-projects-popover-content > .project-sidebar-linked-projects-list-popover {
    margin: 0;
    padding: 0;
    list-style: none;

    > .project-sidebar-linked-projects-item > .project-sidebar-linked-projects-item-link {
        > .project-sidebar-linked-projects-item-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.project-sidebar-linked-projects-title {
    display: flex;
    align-items: center;
    cursor: pointer;

    &:focus {
        > .project-sidebar-linked-projects-label {
            text-decoration: underline;
        }
    }
}

.project-sidebar-linked-projects-icon {
    @extend %round-icon;

    flex: 0 0 auto;
    background: var(--tlp-main-color-transparent-85);
    color: var(--tlp-main-color-lighter-40);

    > .fa-tlp-project-boxes {
        position: relative;
        left: -1px;
        font-size: 0.6rem;
    }

    > .project-sidebar-linked-projects-icon-parent {
        position: relative;
        top: -1px;
        font-size: 0.6rem;
    }
}

.project-sidebar-linked-projects-label-popover,
.project-sidebar-linked-projects-label {
    @extend %uppercase-title;

    margin: 0 0 0 var(--tlp-small-spacing);
    color: var(--tlp-neutral-normal-color);
}

.project-sidebar-linked-projects-label:hover {
    text-decoration: underline;
}

.project-sidebar-linked-projects-item {
    padding: 2px 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.project-sidebar-linked-projects-item-link {
    display: flex;
    align-items: baseline;
    color: var(--tlp-neutral-dark-color);

    &:hover,
    &:focus {
        color: var(--tlp-white-color);
        text-decoration: none;

        > .project-sidebar-linked-projects-item-name {
            text-decoration: underline;
        }
    }
}

.project-sidebar-linked-projects-item-icon {
    position: relative;
    top: -1px;
    flex: 0 0 auto;
    width: 12px;
    margin: 0 4px 0 0;
    font-size: 0.65rem;
    text-align: center;
}

.project-sidebar-tools-section-label {
    @extend %uppercase-title;

    margin: 0 0 var(--tlp-small-spacing) 0;
    padding: var(--tlp-medium-spacing) var(--tlp-medium-spacing) 0;
    color: var(--tlp-neutral-dark-color-transparent-40);
}

.project-sidebar-privacy-badge {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin: 0 0 var(--tlp-small-spacing) 0;
    padding: 5px var(--tlp-small-spacing);
    border-radius: var(--tlp-medium-radius);
    background: var(--tlp-main-color-transparent-85);
    color: var(--tlp-main-color-lighter-40);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 0.875rem;
    cursor: help;
}

.tlp-popover.tlp-popover-shown.project-sidebar-linked-projects-popover {
    &:not(.project-sidebar-linked-projects-popover-nb-max-exceeded) {
        display: none;
    }
}

.project-sidebar-linked-projects-popover {
    &.tlp-popover {
        width: auto;
        max-width: 400px;
    }

    .fa-tlp-project-boxes,
    .project-sidebar-linked-projects-icon-parent {
        margin: 0 var(--tlp-small-spacing) 0 0;
        color: var(--tlp-neutral-light-color);
        font-size: 0.7rem;
    }
}

.project-sidebar-linked-projects-popover-content {
    $magic-number-to-include-popover-body-in-viewport: 70px;

    max-height: calc(100vh - $magic-number-to-include-popover-body-in-viewport);
    overflow: hidden auto;
    background: var(--tlp-dark-color);
}
