@use '../../utils' as *;

/*----------------------------------------*/
/*  4.18 Resume css
/*----------------------------------------*/

.rs-resume{
    &-one{
        .rs-resume-tab-content{
            background: var(--rs-bg-light);
            border-radius: 0 0 4px 4px;
        }
        .rs-resume-tab {
            .nav{
                display: flex;
                align-items: center;
                background: var(--rs-theme-dark-blue);
                justify-content: space-between;
                border-radius: 4px;
                @media #{$xs}{
                    justify-content: center;
                }
            }
            a{
                font-weight: 600;
                font-size: 20px;
                line-height: 1.2;
                position: relative;
                height: 90px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--rs-white);
                border-radius: 4px;
                position: relative;
                z-index: 2;
                width: 250px;
                @media #{$xl}{
                }
                @media #{$lg}{
                    width: 210px;
                }
                @media #{$md}{
                    width: 150px;
                }
                @media #{$sm}{
                    width: 200px;
                }
                &.active{
                    &::before{
                        right: auto;
                        width: 100%;
                    }
                }
                &::before{
                    position: absolute;
                    content: "";
                    width: 0%;
                    height: 100%;
                    background: var(--rs-theme-quaternary);
                    transition: .5s;
                    right: 0px;
                    z-index: -1;
                    border-radius: 4px;
                }
            }
        }
    }
}