html,
html * {
    cursor: none !important;
}

.cursor {
    display: none;
    /* Set to display in our JS */
    pointer-events: none;
    /* Needed to prevent our cursor from becoming the unintended target of our mouse events */
    position: fixed;
    /* Required for setting inset values */
    height: 18px;
    width: 18px;
    transform: translate(-50%, -50%);
    /* Centers circle to cursor location */
    transform-origin: top left;
    z-index: 99999;

    .cursor__inner {
        border-radius: 32px;
        background-color: rgba(255, 255, 255, .2);
        border: 1px solid var(--e-global-color-primary);
        transition: all .3s ease-in-out;
        transform: none;
        height: 18px;
        width: 18px;

        &:after {
            content: '';
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%) scale(0);
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: var(--e-global-color-primary);
            transition: all .12s ease-in-out;
            opacity: 0;
        }
    }
}

.pressable {
    .cursor__inner {
        scale: 1.7;

        &:after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
}

.click {
    .cursor__inner {
        scale: 0.8 !important;
        transition-duration: .12s;

        &:after {
            transform: translate(-50%, -50%) scale(2);
        }
    }
}

/* Only display a message if the user can't hover (which would indicate they're using an input that doesn't have a cursor) */
@media (hover: hover) {
    .no-cursor {
        display: none;
    }
}