/**
 * Copyright (c) Enalean, 2020-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 "sass:map";
@use "sass:color";
@use "pkg:@tuleap/tlp-swatch-colors";

$projects-container-width: 400px;
$white-space-above-and-after-a-project-link: var(--tlp-small-spacing);

#switch-to-modal {
    width: 75vw;
    min-width: 700px;
    max-width: 1200px;
    overflow: hidden;
    background: none;
}

.switch-to-modal-header {
    padding: calc(var(--tlp-medium-spacing) + 1px) var(--tlp-medium-spacing)
        calc(var(--tlp-medium-spacing) + 1px) var(--tlp-large-spacing);
    border-bottom: 1px solid rgb(104 122 124 / 20%);
    background: linear-gradient(0deg, rgb(0 0 0 / 7%), rgb(0 0 0 / 7%)), var(--tlp-dark-color);
    background-blend-mode: overlay;
}

.switch-to-modal-header-filter-container {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
}

.switch-to-modal-header-icon {
    margin: 0 6px 0 0;
    opacity: 0.7;
    color: var(--tlp-dimmed-color);
    font-size: 0.875rem;
    line-height: 1rem;
}

#switch-to-filter {
    width: 100%;
    padding: 0 var(--tlp-small-spacing);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tlp-white-color);
    font-family: var(--tlp-font-family);
    font-size: 1rem;
    font-weight: 500;
    line-height: 32px;

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

    &::-ms-clear,
    &::-ms-reveal {
        display: none;
        width: 0;
        height: 0;
    }

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
        display: none;
    }
}

.switch-to-search-results-more-button,
.switch-to-modal-header-legacy-search-button {
    margin: -2px 0;
    padding: $white-space-above-and-after-a-project-link var(--tlp-small-spacing);
    transition:
        opacity 100ms ease-in-out,
        background 100ms ease-in-out;
    border: 0;
    border-radius: var(--tlp-large-radius);
    opacity: 0.75;
    background: none;
    color: var(--tlp-dimmed-color-on-dark-background);
    font-family: var(--tlp-font-family);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
    cursor: pointer;

    &:focus,
    &:hover {
        opacity: 1;
        background: rgb(0 0 0 / 20%);
    }

    > .switch-to-search-results-more-button-icon,
    > .switch-to-modal-header-legacy-search-button-icon {
        margin: 0 0 0 var(--tlp-small-spacing);
    }
}

.switch-to-modal-body {
    display: flex;
    gap: var(--tlp-jumbo-spacing);
    padding: var(--tlp-large-spacing) var(--tlp-large-spacing) var(--tlp-large-spacing)
        calc(var(--tlp-large-spacing) - var(--tlp-small-spacing));
    background: var(--tlp-dark-color);
    color: var(--tlp-typo-default-text-color-on-dark-background);
}

.switch-to-modal-body-search-results {
    flex-direction: column;
    gap: var(--tlp-large-spacing);
}

.switch-to-modal-body-title {
    color: var(--tlp-dimmed-color);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    text-transform: uppercase;
}

.switch-to-projects {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 calc(var(--tlp-large-spacing) - #{$white-space-above-and-after-a-project-link});
}

$items-padding: calc(var(--tlp-small-spacing) / 2);

.switch-to-projects-project {
    display: flex;
    align-items: baseline;
    padding: $items-padding;
    border-radius: var(--tlp-medium-radius);
    color: var(--tlp-typo-default-text-color-on-dark-background);

    &:focus,
    &:active,
    &:hover,
    &:focus-within,
    &.focused {
        background-color: var(--tlp-dark-color);
        background-image: linear-gradient(
            var(--tlp-sidebar-action-background-hover),
            var(--tlp-sidebar-action-background-hover)
        );
        background-blend-mode: overlay;
        cursor: pointer;

        > .switch-to-projects-project-admin-icon {
            opacity: 1;
        }
    }
}

.switch-to-projects-project-link {
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: var(--tlp-large-radius);
    color: var(--tlp-typo-default-text-color-on-dark-background);

    &:hover,
    &:focus {
        color: inherit;
        text-decoration: none;
    }
}

.switch-to-projects-project-label-icon {
    width: 1rem;
    margin: 0 calc(var(--tlp-small-spacing) / 2) 0 0;
    text-align: center;
}

$quick-link-icon-font-height: 0.7rem;
$items-icon-size: var(--tlp-large-spacing);
$items-icon-margin: var(--tlp-small-spacing);
$content-text-spacing-left: calc($items-icon-size + $items-icon-margin + $items-padding);

.switch-to-projects-project-icon,
.switch-to-item-entry-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: $items-icon-size;
    height: $items-icon-size;
    margin: 0 $items-icon-margin 0 0;
    border-radius: 50%;
    background: var(--tlp-dark-color-lighter-05);
    color: var(--tlp-neutral-dark-color-darker-10);
    font-size: $quick-link-icon-font-height;
    line-height: normal;
}

.switch-to-projects-project-icon {
    &.fa-lock,
    &.fa-tlp-lock-plus-r {
        background: var(--tlp-main-color-transparent-80);
        color: var(--tlp-main-color-lighter-50);
    }
}

.switch-to-projects-project-admin-icon {
    position: relative;
    top: -1px;
    margin: 0 0 0 4px;
    padding: $white-space-above-and-after-a-project-link var(--tlp-small-spacing);
    transition: opacity 100ms ease-in-out;
    border-radius: 50%;
    opacity: 0;
    color: var(--tlp-dimmed-color-on-dark-background);
    font-size: $quick-link-icon-font-height;
    cursor: pointer;

    &:hover,
    &:focus {
        background: rgb(0 0 0 / 20%);
        color: var(--tlp-dimmed-color-on-dark-background);
        text-decoration: none;
    }
}

.switch-to-projects-softwaremap {
    padding: 6px 8px calc(var(--tlp-large-spacing) + 6px) $content-text-spacing-left;
    opacity: 0.75;
    color: var(--tlp-dimmed-color-on-dark-background);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;

    &:visited,
    &:hover,
    &:focus {
        color: var(--tlp-dimmed-color-on-dark-background);
        text-decoration: underline;
    }
}

.switch-to-projects-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 var(--tlp-jumbo-spacing);
}

.switch-to-modal-body-global-loading {
    display: flex;
    width: 100%;

    > p {
        flex: 1 1 auto;

        > .tlp-skeleton-text {
            display: block;
            margin: 0 auto;
        }
    }
}

.switch-to-modal-body-global-empty {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
    padding: 0 0 var(--tlp-jumbo-spacing);
}

.switch-to-projects-container {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: $projects-container-width;

    > .switch-to-modal-body-title {
        margin: 0 0 var(--tlp-medium-spacing) $content-text-spacing-left;
    }
}

.switch-to-modal-body-search-results > .switch-to-projects-container {
    min-width: auto;
    max-width: none;
}

.empty-state-text.switch-to-modal-body-global-empty-text,
.empty-state-text.switch-to-recent-items-empty-text,
.empty-state-text.switch-to-projects-empty-text {
    opacity: 0.75;
    color: var(--tlp-dimmed-color-on-dark-background);
}

.switch-to-empty-illustration {
    opacity: 0.5;

    .stroked {
        stroke: var(--tlp-dimmed-color-on-dark-background);
    }

    .filled {
        fill: var(--tlp-dimmed-color-on-dark-background);
    }
}

.switch-to-modal-no-matching-history,
.switch-to-modal-no-matching-history:last-child {
    margin: var(--tlp-large-spacing) 0 var(--tlp-large-spacing) $content-text-spacing-left;
}

.switch-to-modal-no-matching-history {
    opacity: 0.75;
    color: var(--tlp-dimmed-color-on-dark-background);
    font-size: 0.875rem;
}

.switch-to-recent-items {
    flex: 1 1 auto;
    width: calc(100% - #{$projects-container-width});

    > .switch-to-modal-body-title {
        margin: 0 0 var(--tlp-medium-spacing) $content-text-spacing-left;
    }
}

.switch-to-modal-body-search-results > .switch-to-recent-items {
    width: auto;
}

.switch-to-projects,
.switch-to-recent-items-list {
    font-size: 0.875rem;
}

.switch-to-recent-items-list {
    // force padding bottom at the end of recent items on Chrome
    padding-bottom: 0.1px;
}

.switch-to-recent-items-error {
    opacity: 0.75;
    color: var(--tlp-danger-color-on-dark-background);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
}

.switch-to-recent-items-error-icon {
    margin: 0 4px 0 0;
}

.switch-to-recent-items-loading > p > .tlp-skeleton-text {
    margin: 0 0 0 8px;
}

.switch-to-recent-items-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 var(--tlp-jumbo-spacing);
}

.switch-to-item-entry {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--tlp-small-spacing) / 2);
    border-radius: var(--tlp-medium-radius);

    &:last-child {
        margin: 0 0 var(--tlp-large-spacing);
    }

    &:focus,
    &:active,
    &:hover,
    &:focus-within,
    &.focused {
        background-color: var(--tlp-dark-color);
        background-image: linear-gradient(
            var(--tlp-sidebar-action-background-hover),
            var(--tlp-sidebar-action-background-hover)
        );
        background-blend-mode: overlay;
        cursor: pointer;

        > .switch-to-item-entry-with-links
            > .switch-to-item-entry-links
            > .switch-to-item-entry-quick-links {
            opacity: 1;
        }
    }
}

.switch-to-item-entry-link {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: var(--tlp-typo-default-text-color-on-dark-background);
    text-overflow: ellipsis;
    white-space: nowrap;

    &:focus,
    &:hover {
        color: inherit;
        text-decoration: none;
    }
}

.switch-to-item-entry-badge {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    font-weight: 400;
}

.switch-to-item-entry-label {
    flex: 1 1 auto;
    overflow: hidden;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-to-item-entry-quick-links {
    display: flex;
    padding: 0 0 0 var(--tlp-small-spacing);
    transition: opacity 100ms ease-in-out;
    opacity: 0;
}

.switch-to-item-entry:focus-within,
.switch-to-item-entry:hover {
    > .switch-to-item-entry-quick-links {
        opacity: 1;
    }
}

.switch-to-item-entry-quick-links-link {
    padding: $white-space-above-and-after-a-project-link var(--tlp-small-spacing);
    border-radius: 50%;
    color: var(--tlp-typo-default-text-color-on-dark-background);
    font-size: 0.7rem;

    &:visited {
        color: var(--tlp-typo-default-text-color-on-dark-background);
    }

    &:focus,
    &:hover {
        background: rgb(0 0 0 / 20%);
        color: var(--tlp-typo-default-text-color-on-dark-background);
        text-decoration: none;
    }
}

@each $color-name, $colors in tlp-swatch-colors.$color-map {
    .switch-to-item-entry-link.#{$color-name} > .switch-to-item-entry-icon {
        background: map.get($colors, "badge-background-on-dark");
        color: map.get($colors, "badge-color-on-dark");
    }
}

.switch-to-item-entry-with-links {
    display: flex;
    align-items: center;
}

.switch-to-item-entry-links {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-to-item-metadata {
    margin: 0 0 calc(var(--tlp-small-spacing) / 2) calc(var(--tlp-x-large-spacing));
    color: var(--tlp-neutral-dark-color-darker-20);
    font-size: 0.65rem;
}

.switch-to-item-entry-with-links-with-badge + .switch-to-item-metadata {
    margin-top: calc(var(--tlp-small-spacing) / 2);
}

.switch-to-search-results {
    margin: 0 0 0 $content-text-spacing-left;
    font-size: 0.875rem;
}

.switch-to-search-results-list {
    margin: 0 0 0 calc(-1 * $content-text-spacing-left);

    > .switch-to-item-entry {
        margin: 0 0 calc(var(--tlp-medium-spacing) / 2);
        padding-bottom: calc(var(--tlp-medium-spacing) / 2);
    }
}

.switch-to-search-results-list-has-more {
    margin: var(--tlp-medium-spacing) 0 var(--tlp-medium-spacing) $content-text-spacing-left;
}

.switch-to-search-results-info-icon,
.switch-to-search-results-loading-icon {
    margin: 0 0 0 calc(var(--tlp-small-spacing) / 2);
}

.switch-to-search-results-error-icon {
    margin: 0 calc(var(--tlp-small-spacing) / 2) 0 0;
}

.switch-to-search-results-error {
    opacity: 0.75;
    color: var(--tlp-danger-color-on-dark-background);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
}

.switch-to-item-entry-additional-badge {
    margin: 0 0 0 var(--tlp-small-spacing);
}
