// Product Catogery

.category-wrapper {
    display: flex;
    justify-content: space-between;
    transition: $baseTransition;
    & .category-inner {
        display: flex;
        width: 180px;
        height: 180px;
        border: 2px solid#474747;
        justify-content: center;
        border-radius: 50%;
        transition: $baseTransition;
        position: relative;
        margin: auto;
        @media #{$extra-small-mobile} {
            width: 140px;
            height: 140px;
        }
        &:after {
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: 100%;
            z-index: -1;
            border: 2px dashed $theme-color;
            opacity: 0;
            transition: $baseTransition;
        }
        & .category-single-item {
            align-self: center;
            text-align: center;
            & img {
                margin: auto;

                @media #{$extra-small-mobile} {
                    max-width: 100%;
                }
            }
            & .title {
                display: block;
                font-family: $raleway;
                font-weight: 600;
                color: #474747;
                margin: 12px 0 0;
                transition: $baseTransition;
                @media #{$extra-small-mobile}{
                    font-size: 13px;
                }
            }
        }
        &:hover {
            border-color: transparent;
            &:after {
                opacity: 1;
                -webkit-animation: spinAround 9s linear infinite;
                -moz-animation: spinAround 9s linear infinite;
                animation: spinAround 9s linear infinite;
            }
            & .title {
                color: $theme-color;
            }
        }
    }
}

@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
