Na}{

File Content: _cursor.scss

.enable-cursor .cursor-drag-area{
    cursor: none;
}

.pxl-cursor {
    position: fixed;
    background-color: $cursor_circle_bg;
    width: $cursor_size;
    height: $cursor_size;
    border-radius: 100%;
    z-index: 1;
    transition: transform 0.3s linear, opacity 0.2s linear ;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: scale(1); 
    transform-origin: center;
    &.active {
        opacity: 1;
        transform: scale(0);
        color: $cursor_active_text_color;
        background-color: $cursor_follower_active_bg;
    }
    &:not(.active){
        mix-blend-mode: $cursor_blend_mode;
    }
    &.none-follower{
        &.active {
            transform: scale(2.5);
        }
    }
    &.hide{
        display: none;
    } 
}

.pxl-cursor-follower {
    position: fixed;
    background-color: $cursor_follower_circle_bg; 
    width: $cursor_follower_size;
    height: $cursor_follower_size;
    border-radius: 100%;
    z-index: 1;
    transition: 0.6s transform linear, opacity 0.2s linear, background 0.2s linear;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: translate(2px, 2px);
    transform-origin: center;
    &.active {
        opacity: 1;
        transform: scale(3);
        color: $cursor_active_text_color;
        background-color: $cursor_follower_active_bg;
        &.video{
            background-color: $cursor_follower_active_bg;
        }
    }
    &:not(.active){
        mix-blend-mode: $cursor_blend_mode;
    }
    &.hide{
        display: none;
    }
}

.pxl-cursor-arrow-prev{
    position: fixed;
    background-color: $primary_color;
    width: 104px;
    height: 104px;
    border-radius: 100%;
    z-index: 1;
    transition: transform 0.3s linear, opacity 0.2s linear ;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.5); 
    transform-origin: center;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    font-family: $heading_font_family;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    @include d-flex-align-justify-center();
    &.active {
        opacity: 1;
        transform: scale(1);
    }
    &.hide{
        display: none;
    }
    .icon{
        margin-right: 8px;
    }
    .rotate-180{
        @include transform(rotate(180deg));
    }
    .text{
        margin-top: 1px;
    } 
}
.pxl-cursor-arrow-next{
    position: fixed;
    background-color: $primary_color;
    width: 104px;
    height: 104px;
    border-radius: 100%;
    z-index: 1;
    transition: transform 0.3s linear, opacity 0.2s linear ;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.5); 
    transform-origin: center;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    font-family: $heading_font_family;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    @include d-flex-align-justify-center();
    &.active {
        opacity: 1;
        transform: scale(1);
    }
    &.hide{
        display: none;
    } 
    .icon{
        margin-left: 7px;
    }
    .rotate-180{
        @include transform(rotate(180deg));
    } 
    .text{
        margin-top: 1px;
    }
}

.pxl-cursor-drag{
    position: fixed;
    width: 104px;
    height: 104px;
    border-radius: 100%;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: scale(0.5); 
    transform-origin: center;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    font-family: $heading_font_family;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 -8px;
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    mix-blend-mode: $cursor_blend_mode;
    @include transition(all .08s linear);
    >*{
        display: inline-flex;
    }
    &.active {
        opacity: 1;
        transform: scale(1);
    }
    &.hide{
        display: none;
    } 
    .pxl-overlay{
        width: 100%;
        height: 100%;
        background-color: $primary_color;
        border-radius: 100%;
        @include transition(all .3s ease);
    }
    .icon{
        font-size: 14px;
        color: #fff; 
        margin: 0 8px;
        z-index: 1;
        @include transition(all .3s ease);
    }
    .text{
        z-index: 1;
        opacity: 1;
        transform: scale(1); 
        @include transition(all .3s ease .4s);

}
    .rotate-180{
        @include transform(rotate(180deg));
    }
    &.clicked{
        width: 70px;
        height: 70px;
        .pxl-overlay{
            transform: scale(0.8); 
        }
        .text{
            opacity: 0;
            transform: scale(0); 
            display: none; 
        }
        .icon-left{
            @include transform(translateX(-50px));
            &.rotate-180{
                @include transform(translateX(-50px) rotate(180deg));
            }
        }
        .icon-right{
            @include transform(translateX(50px));
            &.rotate-180{
                @include transform(translateX(50px) rotate(180deg));
            }
        }

}  
}

.pxl-cursor-map{
    position: fixed;
    background-color: $primary_color;
    width: 101px;
    height: 101px;
    border-radius: 100%;
    z-index: 1;
    transition: transform 0.3s linear, opacity 0.2s linear ;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.5); 
    transform-origin: center;
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    text-transform: uppercase;
    @include d-flex-align-justify-center();
    &.active {
        opacity: 1;
        transform: scale(1);
    }
    &.hide{
        display: none;
    } 
}

.cursor-outline{
    .pxl-cursor{
        width: 5px;
        height: 5px;
    }
    .pxl-cursor-follower{
        background-color: transparent;
        border: 1px solid $primary_color;
    }
    .pxl-cursor-arrow-prev{
        background-color: transparent;
        border: 2px solid $primary_color;
        text-transform: capitalize;
        .icon{
            font-size: 10px;
        } 
    }
    .pxl-cursor-arrow-next{
        background-color: transparent;
        border: 2px solid $primary_color;
        text-transform: capitalize;
        .icon{
            font-size: 10px;
        } 
    }
    .pxl-cursor-drag{
        mix-blend-mode: unset;
        .pxl-overlay{
            background-color: transparent;
            border: 2px solid $primary_color;
        }
    } 
}

Name	Size	Permission
_block.scss	3511 bytes	0644
_cursor.scss	7065 bytes	0644
_untest.scss	613 bytes	0644
extra.scss	74 bytes	0644