/**
 * 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 "./creation-screen-breakpoints";

.tracker-creation-step {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;

    @media screen and (max-width: creation-screen-breakpoints.$creation-tiny-screen-width) {
        margin: 0;
    }

    @media screen and (max-width: creation-screen-breakpoints.$creation-tiny-screen-width) {
        flex-direction: column;
    }

    > .tracker-creation-starting-point-illustration {
        margin: 80px 80px 0 0;

        > svg {
            width: 100%;
        }

        @media screen and (max-width: creation-screen-breakpoints.$creation-small-screen-width) {
            width: 35%;
            margin: 80px var(--tlp-large-spacing) 0 0;
        }

        @media screen and (max-width: creation-screen-breakpoints.$creation-tiny-screen-width) {
            display: none;
        }
    }

    > .tracker-creation-step-content {
        display: flex;
        flex: 1;
        flex-direction: column;
    }
}

.tracker-creation-step-info {
    margin: 0 0 var(--tlp-x-large-spacing);

    p {
        margin: 0;
    }
}

.tracker-creation-step-info-label {
    display: flex;
    align-items: center;
    margin: 0 0 var(--tlp-small-spacing) 0;
}

.tracker-creation-step-label {
    color: var(--tlp-main-color);
    font-size: 28px;
    line-height: 36px;
}

.tracker-creation-step-interactive-content {
    margin: 0 0 var(--tlp-medium-spacing) 0;
    border-bottom: 1px solid var(--tlp-neutral-dark-color);
}

.tracker-creation-starting-point-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: var(--tlp-medium-spacing) 0;

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

    @media screen and (max-width: creation-screen-breakpoints.$creation-small-screen-width) {
        flex-direction: column;
    }
}

.tracker-information-selected-template {
    display: flex;

    .tlp-property {
        margin: 0 0 var(--tlp-large-spacing) var(--tlp-x-large-spacing);

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

    .tracker-information-selected-template-info {
        font-size: 18px;
    }
}

#tracker-creation-form {
    width: 600px;

    .tlp-form-element {
        margin: 0 0 var(--tlp-large-spacing);
    }

    #tracker-creation-xml-file-selector {
        display: none;
    }

    > .tracker-creation-form-element-group {
        display: flex;
        margin: 0 0 var(--tlp-large-spacing) 0;

        > .tlp-form-element {
            margin: 0 0 0 var(--tlp-x-large-spacing);

            &:first-child {
                margin: 0;
            }
        }
    }

    @media screen and (max-width: creation-screen-breakpoints.$creation-tiny-screen-width) {
        width: 100%;
    }
}

#tracker-name,
#tracker-shortname,
.tracker-shortname-input-helper {
    width: 350px;
}

#tracker-shortname-slugified-mode-label {
    display: flex;
    margin: calc(-1 * var(--tlp-small-spacing)) 0 var(--tlp-small-spacing);
    padding-left: 4px;
    color: var(--tlp-dimmed-color);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;

    > .tracker-shortname-slugified {
        margin: 0 0 0 5px;
        font-weight: bold;
    }

    > .fa-pencil {
        margin: 0 0 0 5px;
    }
}

.tracker-creation-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tracker-creation-navigation-back-to-legacy {
    color: var(--tlp-dimmed-color);
}

.tracker-creation-navigation-buttons {
    display: flex;
    justify-content: flex-end;

    > .tracker-creation-next-step-button,
    > .tracker-creation-submit-button {
        margin: 0 0 0 var(--tlp-medium-spacing);
        overflow: visible;
    }

    > .tracker-creation-previous-step-button {
        align-self: center;
        color: var(--tlp-dimmed-color);

        &:hover {
            text-decoration: none;

            > .tracker-creation-previous-step-button-text {
                text-decoration: underline;
            }
        }

        > .fa {
            margin: 0 0 0 4px;
        }
    }
}
