/* $mf-color-base:#FFE500 !default;
$mf-color-text:#000000 !default; */


/* Light Mode */
[data-theme="light"] {
    .mf-cursor::before {
        background-color: var(--yellow);
        /* border: 1px solid var(--white); */
    }
}

/* Dark Mode */
[data-theme="dark"] {
    .mf-cursor::before {
        background-color: var(--yellow);
        /* border: 1px solid var(--darkgrey); */
    }
}

/* Dark Mode */
[data-theme="yellow"] {
    .mf-cursor::before {
        background-color: var(--darkgrey);
        border: 1px solid var(--yellow);
    }
}


@media(max-width: 1023px){
    /* Hide custom cursor on mobile - For some reason it does hide programmatically */
    .mf-cursor {
        display:none;
    }
}

.mf-cursor {
    position:fixed;
    top:0;
    left:0;
    /* TODO: fix z-index issue with Cursor + mix-blend-mode */
    /* z-index:-1; */
    z-index: 1001;

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

    transition:opacity 0.3s, color 0.4s;
    will-change: transform !important;

    &:before {
        content:"";
        position:absolute;
        top: 0;
        left: 0;
        display:block;
        width:20px;
        height:20px;
        transform:scale(1);
        /* background: var(--base-color, #FFE500); */
        background-color: var( --background-color, light-dark(#FFE500, #ffff));
        border-radius:50%;
        transition:transform 0.25s ease, opacity 0.1s;
        will-change: transform;
    }

    &.-inverse {
        /* color:invert(var(--base-text-color)); */

        &:before {
            background-color: var( --background-color, light-dark(#FFE500, #000000));
        }
    }

    
    &.-exclusion {
        mix-blend-mode: darken
    }

    &.-pointer {
        &:before {
            transform:scale(1); /* 90px */
        }
    }

    &.-text {
        &:before {
            transform:scale(4.5);
        }

        .mf-cursor-text {
            opacity:1;
            transform:scale(1.3);
            transition:opacity 0.2s, transform 0.2s;

            font-family: 'Rethink';
            font-size: 1rem;
        }
    }


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

        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 14px;
            left: 10px;
            width: 63px;
            height: 25px;
            transform: translate(-50%, -50%);
            /* background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7612 11.3748H0V8.65413H14.7612L8.04631 1.93923L9.98553 7.62939e-06L20 10.0145L9.98553 20L8.04631 18.0897L14.7612 11.3748Z' fill='%2316171B'/%3E%3C/svg%3E%0A"); */
            background-image: url("data:image/svg+xml,%3Csvg width='47' height='13' viewBox='0 0 47 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-0.000238419 6.33326C-0.000238419 6.17905 0.0931501 5.97419 0.187742 5.87475L5.52097 0.208055C5.76995 -0.0493613 6.1733 -0.0791704 6.46363 0.182037C6.72311 0.415679 6.72966 0.871066 6.48965 1.12487L2.20846 5.66678H15.3334C15.7016 5.66678 16 5.96521 16 6.3334C16 6.7016 15.7016 7.00002 15.3334 7.00002H2.20846L6.48965 11.5419C6.72966 11.7956 6.7126 12.2399 6.46363 12.4846C6.20087 12.743 5.76617 12.72 5.52097 12.4586L0.187742 6.79188C0.0311193 6.63819 0.00234604 6.4899 -0.000238419 6.33326Z' fill='black'/%3E%3Cpath d='M47.0002 6.33326C47.0002 6.17905 46.9068 5.97419 46.8123 5.87475L41.479 0.208055C41.2301 -0.0493613 40.8267 -0.0791704 40.5364 0.182037C40.2769 0.415679 40.2703 0.871066 40.5104 1.12487L44.7915 5.66678H31.6666C31.2984 5.66678 31 5.96521 31 6.3334C31 6.7016 31.2984 7.00002 31.6666 7.00002H44.7915L40.5104 11.5419C40.2703 11.7956 40.2874 12.2399 40.5364 12.4846C40.7991 12.743 41.2338 12.72 41.479 12.4586L46.8123 6.79188C46.9689 6.63819 46.9977 6.4899 47.0002 6.33326Z' fill='black'/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-size: 63px;
        }

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

        .mf-cursor-text {
            opacity:1;
            transform:scale(1);
        }
    }

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

    &.-media {
        &:before {
            transform:scale(4.5);
        }

        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 12px;
            left: 15px;
            width: 40px;
            height: 49px;
            transform: translate(-50%, -50%);
            /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z'/%3E%3C/svg%3E"); */
            background-image: url("data:image/svg+xml,%3Csvg width='23' height='26' viewBox='0 0 23 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.399296 0.106078C0.151406 0.247092 -0.00147756 0.509828 1.07687e-05 0.794828V24.5493C0.00149514 25.1579 0.663522 25.5364 1.19346 25.2306L21.8708 13.354C22.4022 13.0497 22.4008 12.2882 21.8694 11.9839L1.19198 0.105761C0.947057 -0.0352537 0.64573 -0.0352537 0.399331 0.105761L0.399296 0.106078ZM1.58977 2.16194L19.8849 12.667L1.58851 23.1778L1.58977 2.16194Z' fill='black'/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-size: 40px;
        }
    }

    &.-media-close {
        &:before {
            transform:scale(4.5);
        }

        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 9px;
            left: 9px;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 40px;
        }
    }

}

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

    opacity:0;
    color: var(--base-text-color, #000000);

    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);
    } */
}

.mf-cursor-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;
        } */
    }
}