@use'../variables' as*;

.step-forms{
    position: relative;
    .steps{
        ul{
            position: relative;
            list-style: none;
            padding: 0;
            li{
                position: relative;
                border: 1px solid $gray-200;
                border-radius: 6px;
                margin-bottom: .5rem;
                &.current{
                    background-color: $gray-200;
                    .current-info{
                        display: none;
                    }
                }
                &.done{
                    background-color: $primary;
                    a{
                        color: $white;
                    }
                }
                a{
                    display: flex;
                    padding: 1rem 1.5rem;
                    text-decoration: none;
                    color: $gray-800;
                    font-size: 1rem;
                }
            }
        }
    }
    .content {
        .title{
            display: none;
        }
        .body{
            border: 1px solid $gray-200;
            padding: 2rem;
            border-radius: 10px;
            color: $gray-900;
        }
    }
    .actions {
        position: relative;
        margin-top: 1rem;
        text-align: end;
        ul{
            display: inline-flex;
            gap: .8rem;
            list-style: none;
            padding: 0;
            li{
                a{
                    display: inline-flex;
                    border: 1px solid $gray-200;
                    padding: .5rem 1rem;
                    border-radius: 5px;
                    text-decoration: none;
                }
                & [href="#next"]{
                    background-color: $primary;
                    color: $white;
                }
                & [href="#finish"]{
                    background-color: $primary;
                    color: $white;
                }
            }
        }
    }
}