/**
 * 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 "./includes/cards";
@use "./includes/project-information";
@use "./includes/services";

$illustration-width: 319px;
$illustration-spacing: calc(2 * var(--tlp-jumbo-spacing));
$title-margin-left: calc(#{$illustration-width} + #{$illustration-spacing});
$template-category-active-tab-right-border-width: 3px;
$template-category-inactive-tab-right-border-width: 1px;
$template-category-inactive-tab-right-margin: calc(
    var(--tlp-medium-spacing) + #{$template-category-active-tab-right-border-width} - #{$template-category-inactive-tab-right-border-width}
);

.project-registration {
    padding: var(--tlp-medium-spacing) var(--tlp-medium-spacing) 100px;
}

.project-registration-content {
    display: flex;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}

.register-new-project-boxes {
    min-width: $illustration-width;
    margin: $illustration-spacing 0 0;
}

.register-new-project-section {
    display: flex;
    overflow: hidden;
}

.register-new-project-list {
    width: 100%;
    margin: 0 0 0 $illustration-spacing;
}

.project-registration-templates {
    flex: 1;
}

.register-new-project-icon {
    margin: 0 5px 0 0;
}

@keyframes footer-appear {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.project-registration-button-container {
    padding: var(--tlp-medium-spacing) 0 0;
    border-top: 1px solid var(--tlp-neutral-dark-color-transparent-50);

    > .project-registration-content {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
    }

    &.pinned {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        padding: var(--tlp-large-spacing);
        animation: footer-appear ease-out 150ms;
        border-top: 0;
        background: var(--tlp-white-color-transparent-10);
        box-shadow: var(--tlp-sticky-footer-shadow);
    }
}

.project-registration-back-button {
    margin: 0 var(--tlp-medium-spacing) 0 0;
    color: var(--tlp-dimmed-color);
    cursor: pointer;
}

.project-registration-back-icon {
    margin: 0 5px 0 0;

    &:hover {
        text-decoration: none;
    }
}

.project-registration-template-selection {
    display: flex;
    margin: var(--tlp-x-large-spacing) 0 var(--tlp-large-spacing) 0;
}

.project-registration-template-selection-tabs {
    margin: 0 var(--tlp-medium-spacing) 0 0;
}

.templates-category-tab-with-mixed-case {
    text-transform: none;
}

@media screen and (max-width: 1000px) {
    .project-registration-content {
        justify-content: stretch;
    }

    .project-registration-form {
        width: 100%;
    }

    .register-new-project-section {
        flex-direction: column;
        margin: 0;
    }

    .project-registration-title {
        margin: 0 0 var(--tlp-medium-spacing);
    }

    .register-new-project-boxes {
        display: none;
        margin: 0 0 var(--tlp-x-large-spacing);

        > svg {
            width: auto;
            height: calc(2 * var(--tlp-jumbo-spacing));
        }
    }

    .register-new-project-list {
        margin: 0;

        &.register-new-project-information {
            width: 100%;
        }
    }
}
