$close-icon-default-size: 20px;

.#{$prefix}-close-icon{
    width: $close-icon-default-size;
    height: $close-icon-default-size;
    position: relative;
    display: inline-block;
    cursor: pointer;
    @include transition();
    vertical-align: middle;
    @include media(lg){
        &:hover{
            @include animation(rotate-center 0.3s linear both);
        }
    }
  
    span{
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        z-index: 5;
        top: 50%;
        border-radius: 5px;
        @extend %primary-bg;
        @include transform (rotate(45deg));
        &:last-child{
            @include transform(rotate(135deg));
        }
      
    }
    
    &.#{$prefix}-close-icon-white{
        span{
            background-color: $color_white;
        }
    }
  
          
}  