@use "../../../../../../styles/abstracts/variables";
@use "../../../../../../styles/abstracts/mixins";

.steps{

    h2{
        padding-top: 0;
        font-weight: 600;
        font-size: 1rem;
        color: variables.$col-white
    }
    p{
        padding-bottom: 1.8rem;
        font-size: .83rem;
        color: variables.$col-white;
        font-weight: 500;
        opacity: .8;
    }

    &__buttons{
        display: flex;
        gap: 20px;
        padding-top: 2rem;

        &__button{
            padding: .7rem 1rem;
            border-radius: 10px;
            cursor: pointer;
            font-size: .8rem;
            font-weight: 600;
            display: flex;
            gap: 10px;
            align-items: center;

            &--prev{
                @extend .steps__buttons__button;
                background: variables.$col-active-btn-bg;
                color: #FFF;
            }

            &--next{
                @extend .steps__buttons__button;
                background: variables.$col-orange;
                color: variables.$col-dark;
            }
        }

    }

    small{
        font-weight: 600;
        opacity: .8;
        font-size: .75rem;
    }

    button{
        background: variables.$col-orange;
        margin-top: 1rem;
        padding: .7rem 1.5rem;
        border-radius: 10px;
        color: variables.$col-dark !important;
        font-size: .9rem;
        font-weight: 600;
        // width: 100%;
        cursor: pointer;
    }

    //ROWS
    &__row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;

        @media only screen and (max-width: 1000px) {
            grid-template-columns: 1fr;
            padding-bottom: 0 !important;
            grid-gap: 0;
        }

        &--password{
            position: relative;
            font-family: variables.$font;
    
            span {
                color: #FFF;
                position: absolute;
                right: 1.5rem;
                top: 1.2rem;
                font-weight: 600;
                font-size: .8rem;
                cursor: pointer;
                opacity: .8;
            }
        }
    }
}

form{
    label{
       @include mixins.formLabel
    }

    input {
        @include mixins.formInput
    }
    select {
        @include mixins.formSelect
    }


    // input, select, textarea{
    //     height: 3.2rem;
    //     border-radius: 10px;
    //     padding: .5rem 1rem;
    //     width: 100%;
    //     margin-bottom: .5rem;
    //     margin-top: .3rem;
    //     border: 1px solid #454444;
    //     outline: none;
    //     background: transparent;
    //     color: #FFF;
    //     font-family: variables.$font;
    //     opacity: 1 !important;
    // } 
    // input[type="text"]::placeholder, Input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="tel"]::placeholder{
    //     opacity: .85 !important;
    //     color: #FFF !important;
    //     font-size: .8rem;
    // } 

    input[type="password"]{
        font-size: 1.5rem;
    }

    input[type="password"]::placeholder{
        font-size: .8rem;
    }

    select, input{
        font-size: .85rem;
    }


    input:focus-within {
        // @include mixins.focusInput
        border: 1px solid #f9c16d
    }
    select:focus-within {
        // @include mixins.focusInput
        border: 1px solid #f9c16d
    }
}