@import "../../assets/css/mixin.scss";

.component_setup{
    transform: none!important; // transition and fixed position doesn't cohabit well so we have to resort
                               // to remove animation on this page to preserve the layout

    h4{
        user-select: none;
        text-align: center;
        font-size: 1.4em;
        font-weight: 500;
        padding: 20px 0 0px 0;
        .component_icon{
            vertical-align: text-top;
            width: 1.3em;
            cursor: pointer;
            &[alt="loading"]{ opacity: 0; }
        }
    }
    #step1{
        p {
            font-size: 1.1em;
            margin-bottom: 10px;
        }

        form {
            max-width: 400px;
        }
        @include inlinedInputWithSubmit();
    }
    #step2{
        .component_dependency_installed{
            margin: 10px 0;
            padding: 10px 10px;
            border-radius: 3px;
            color: var(--emphasis);
            &.yes{
                background: var(--success);
            }
            &.no{
                background: var(--primary);
                &.severe{
                    background: var(--error);
                    span{
                        font-weight: bold;
                        font-style: italic;
                    }
                }
            }
        }
    }

    .stepper-form-appear, .stepper-form-enter{
        transition-delay: 0.3s;
        transform: scale(1.02);
        opacity: 0;
        transition: all 0.3s ease;
        &.stepper-form-appear-active, &.stepper-form-enter-active{
            opacity: 1;
            transform: scale(1);
        }
    }

    .component_icon{
        width: 30px;
    }
}