@import "variables";

.work-history-section,
.education-section {
    .card {
        background-color: $blue-200;

        span {
            background-image: $primary;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        p {
            line-height: 2;
        }

        .card-btn {
            background-image: $primary;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            border: $border;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 14px;
        }
    }
}

.skill-section {
    .design-skill-section {
        span {
            display: block;
        }

        .progress {
            height: auto;
            display: block;
            background: transparent;
            width: 100%;

            box-sizing: border-box;
        }

        .progress [data-progress] {
            height: 8px;
            box-shadow: 0 0 1px 1px rgb(255 255 255 / 18%) inset;
            border-radius: 5px;
            margin: 5px 0 12px 0;
            overflow: hidden;
        }

        [data-progress]::after {
            content: "";
            display: flex;
            justify-content: flex-end;
            align-items: center;
            background-image: $primary;
            width: 0;
            height: 100%;
            box-sizing: border-box;
            font-size: 0;
            color: $white;
            padding: 0 3px;
            animation: progress 3s normal forwards;
        }

        [data-progress].animate-progress::after {
            content: attr(data-progress) "%";
            width: var(--animate-progress);
        }

        @keyframes progress {
            0% {
                width: 0;
            }
        }
    }

    .devloper-skill-section {
        .card {
            background-color: transparent;
            box-shadow: none;
            border: 0;
        }

        canvas {
            width: 80px;
            height: 80px;
        }

        .bar {
            width: 80px;
            height: 80px;
            animation: loading-1 1.8s linear forwards;
        }

        .card .circle {
            position: relative;
            height: 80px;
            width: 80px;
            border-radius: 50%;
            cursor: default;
        }

        .card .circle .box,
        .card .circle .box span {
            position: absolute;
            top: 50%;
            left: 50%;
        }

        .card .circle .box {
            height: 100%;
            width: 100%;
            /*   background: #fff; */
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            transition: all 0.2s;
        }

        .card .circle .box span,
        .card .text {
            color: $white;
        }

        .circle .box span {
            font-size: 18px;
            font-family: sans-serif;
            font-weight: 600;
            transform: translate(-45%, -45%);
            transition: all 0.1s;
        }

        .card .circle:hover .box span {
            transform: translate(-45%, -45%) scale(1.09);
        }
    }
}