@import '../1-Helpers/variables';
@import '../2-Tools/animations';

.waves {
    position: relative;
    overflow: hidden;
    cursor: pointer;

    .wave {
        position: absolute;
        left: 0;
        top: 0;
        transform: scale(0);
        border-radius: 50%;
        background-color: #ffffffb3;
        animation: ripple .6s linear;
    }

    &.waves{
        &-blue .wave {
            background-color: $blue;
        }

        &-dark .wave {
            background-color: #000000;
        }
        
        &-green .wave {
            background-color: $green;
        }

        &-orange .wave {
            background-color: $orange;
        }

        &-primary .wave {
            background-color: $primary-color;
        }

        &-red .wave {
            background-color: $red;
        }

        &-secondary .wave {
            background-color: $secondary-color;
        }
    }

}