$mf-color-base: #000 !default;
$mf-color-text: #fff !default;

.mf-cursor {
    $root: &;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;

    direction: ltr;
    contain: layout style size;
    pointer-events: none;

    transition: opacity 0.3s, color 0.4s;

    &:before {
        content: "";
        position: absolute;
        top: -24px;
        left: -24px;
        display: block;
        width: 48px;
        height: 48px;
        transform: scale(0.2);

        background: currentColor;
        border-radius: 50%;

        transition: transform 0.25s ease-in-out, opacity 0.1s;
    }

    &.-inverse {
        color: invert($mf-color-base);
    }

    &.-exclusion {
        @supports (mix-blend-mode:exclusion) {
            mix-blend-mode: exclusion;

            &:before {
                background: invert($mf-color-base);
            }
        }
    }

    &.-pointer {
        &:before {
            transform: scale(0.15);
        }
    }

    &.-text {
        &:before {
            opacity: 0.85;
            transform: scale(1.7);
        }

        &.-active:before {
            transform: scale(1.6);
            transition-duration: 0.2s;
        }
    }

    &.-icon {
        &:before {
            transform: scale(1.5);
        }

        &.-active:before {
            transform: scale(1.4);
        }
    }

    &.-hidden {
        &:before {
            transform: scale(0);
        }
    }

    &-text {
        position: absolute;
        top: -18px;
        left: -18px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(0) rotate(10deg);

        opacity: 0;
        color: $mf-color-text;

        font-size: 16px;
        line-height: 20px;
        text-align: center;

        transition: opacity 0.4s, transform 0.3s;

        #{$root}.-text &, #{$root}.-icon & {
            opacity: 1;
            transform: scale(1);
        }
    }

    &-icon {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    &-media {
        position: absolute;
        width: 400px;
        height: 400px;
        margin: (-400px * 0.5) 0 0 (-400px * 0.5);

        img, video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;

            @supports (object-fit:cover) {
                position: static;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: translateZ(0);
            }
        }

        &-box {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            transform: scale(0) translateZ(0);
            padding: 1px;

            opacity: 0;
            border-radius: 50%;

            transition: transform 0.35s, opacity 0.2s 0.2s;

            #{$root}.-media & {
                opacity: 1;
                transform: scale(0.696);
                transition-duration: 0.4s, 0.4s;
                transition-delay: 0s, 0s;
            }
        }
    }
}