/* $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-pause {
        &:before {
            transform:scale(4.5);
        }

        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 10px;
            left: 14px;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='26' viewBox='0 0 16 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2C0 0.895431 0.895431 0 2 0H3C4.10457 0 5 0.895431 5 2V24C5 25.1046 4.10457 26 3 26H2C0.895431 26 0 25.1046 0 24V2Z' fill='black'/%3E%3Cpath d='M11 2C11 0.895431 11.8954 0 13 0H14C15.1046 0 16 0.895431 16 2V24C16 25.1046 15.1046 26 14 26H13C11.8954 26 11 25.1046 11 24V2Z' fill='black'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 32px;
        }
    }

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

        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 12px;
            left: 12px;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            background-image: url("data:image/svg+xml,%3Csvg width='18' height='26' viewBox='0 0 18 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='5.76923' height='24.8462' rx='1.5' fill='black' stroke='black'/%3E%3Crect x='11.2308' y='0.5' width='5.76923' height='24.8462' rx='1.5' fill='black' stroke='black'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 30px;
        }
    }

}

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