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

.success{
    @include dashPageComponent;
    &{
        height: 120vh;
        @media only screen and (max-width: 1000px){
            height: 125vh;
            padding: 1rem 1rem;
        }
    }

    &__body{
        &--top{
            background: $col-primary-btn;
            padding: 1.5rem 2rem;
            border-radius: 6px;
            height: 10rem;

            @media only screen and (max-width: 1000px) {
                padding: 1rem 1rem;
            }

            h1{
                color: $col-white;
                font-weight: 500;
            }
            p{
                color: $col-white;
                opacity: .9;
                font-size: .82rem;
                font-weight: 500;
                line-height: 1.7;
                padding-bottom: 1rem;
            }
        }

        &--buttons {
            padding-top: 2rem;
            display: flex;
            gap: 15px;
            padding-bottom: 1rem;
            @media only screen and (max-width: 1000px){
                flex-direction: column;
                padding-top: 1.5rem;
                gap: 35px;
            }

            &--download {
                background: $col-primary-btn;
                padding: .8rem 1rem;
                border-radius: 6px;
                color: $col-white;
                font-size: .8rem;
                font-weight: 500;
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                @media only screen and (max-width: 1000px){
                    width: 100%;
                    padding: 1rem 2rem;
                }
            }

            &--back{
                background: transparent;
                border: 2px solid $col-primary-btn;
                color: $col-primary-btn !important;
                padding: .8rem 1rem;
                border-radius: 6px;
                color: $col-white;
                font-size: .8rem;
                font-weight: 600;
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                @media only screen and (max-width: 1000px){
                    width: 100%;
                    padding: 1rem 1rem;
                }
            }
        }
    }
}