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

/*----------------------------------------*/
/*  7.1 Fact css start
/*----------------------------------------*/


.mtskill {
    @media #{$xs} {
      padding-left: 10px;
      padding-right: 10px;
    }
    &__item {
        position: relative;

        & h6 {
            font-size: 16px;
            font-weight: 700;
            font-family: var(--mt-ff-body);

            @media #{$lg,$md,$xs} {
                font-size: 15px;
            }
        }

        & .progress-count {
            position: absolute;
            top: -2px;
            right: 0px;
            font-size: 16px;
            font-weight: 700;
            color: var(--mt-common-black);
        }

        & .progress {
            height: 3px;
            background-color: transparent;
            border-radius: 50px;
            overflow: visible;
            position: relative;

            &::after {
                position: absolute;
                content: "";
                left: 0;
                top: 1px;
                height: 3px;
                width: 100%;
                background-color: #d1d1d1;
                z-index: -1;
                border-radius: 50px;
            }

            & .progress-bar {
                background-color: var(--mt-common-black);
                overflow: visible;
                border-radius: 50px;
            }
        }
    }
}