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

/*----------------------------------------*/
/*  7.13 skill css
/*--------------------------------*/

.tp-skill{
    &-title-box{
        & p{
            font-weight: 400;
            font-size: 16px;
            line-height: 1.5;
            padding-right: 70px;
            margin-bottom: 0;
            color: rgba($color: #fff, $alpha: 0.8);
        }
    }
    &-mail{
        & a{
            font-weight: 500;
            font-size: 16px;
            line-height: 1;
            color: var(--tp-common-white);
            & > span{
                height: 50px;
                width: 50px;
                line-height: 47px;
                border-radius: 50%;
                margin-right: 15px;
                text-align: center;
                display: inline-block;
                background-color: rgba(255, 255, 255, 0.06);
            }
            & i{
                font-style: normal;
                position: relative;
                &::after{
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 0;
                    height: 1px;
                    content: '';
                    background-color: #fff;
                    transition: .4s;
                }
            }
            &:hover{
                & i{
                    &::after{
                        right: auto;
                        left: 0;
                        width: 100%;
                    }
                }
            }
        }
    }
    &-wrap{
        @media #{$lg,$md,$xs}{
            margin-bottom: 40px;
        }
    }
}

.tp-progress-bar{
    &-wrap{
        padding-left: 100px;
        @media #{$lg,$md,$xs}{
            padding-left: 0;
        }
    }
    &-item{
        padding: 25px 0px;
        overflow: hidden;
        padding-bottom: 10px;
    }
    &-title{
        margin-bottom: 20px;
        & label,
        & span{
            font-weight: 600;
            font-size: 18px;
            line-height: 1;
            display: inline-block;
            color: var(--tp-common-white);
        }
    }
    & .progress{
        overflow: visible;
        height: 6px;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.1);
    }
    & .progress-bar{
        position: relative;
        top: 0;
        height: 6px;
        overflow: visible;
        border-radius: 0;
        background-color: var(--tp-common-sky);
        &::after{
            position: absolute;
            content: "";
            height: 20px;
            width: 1px;
            top: -7px;
            right: 0;
            background-color: var(--tp-common-sky);
        }
    }
}

.tp-skill{
    &-style-2{
        & .tp-skill-title-box p {
            color: #525356;
        }
        & .tp-skill-mail a {
            color: var(--tp-common-black);
        }
        & .tp-skill-mail a > span {
            background-color: rgba(20, 24, 32, 0.06);
        }
        & .tp-skill-mail a i::after {
            background-color: var(--tp-common-black);
        }
        & .tp-progress-bar-title label, .tp-progress-bar-title span {
            color: var(--tp-common-black);
        }
        & .tp-progress-bar .progress {
            background: #f2eef0;
        }
        & .tp-progress-bar .progress-bar {
            background-color: var(--tp-common-pink-3);
        }
        & .tp-progress-bar .progress-bar::after {
            background-color: var(--tp-common-pink-3);
        }
    }
}