@use "../../01-core/external" as *;

@mixin ss-mask-base {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

@mixin ss-mask-shape($shape) {
    @include ss-mask-base;

    @if $shape == squircle {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/></svg>");
    } @else if $shape == circle {
        -webkit-mask-image: radial-gradient(
            circle,
            black 99%,
            transparent 100%
        );
        mask-image: radial-gradient(circle, black 99%, transparent 100%);
    } @else if $shape == hexagon {
        -webkit-clip-path: polygon(
            25% 5%,
            75% 5%,
            100% 50%,
            75% 95%,
            25% 95%,
            0 50%
        );
        clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
    } @else if $shape == triangle {
        -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    } @else if $shape == pentagon {
        -webkit-clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
        clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
    } @else if $shape == decagon {
        -webkit-clip-path: polygon(
            50% 0,
            80% 10%,
            100% 35%,
            100% 70%,
            80% 90%,
            50% 100%,
            20% 90%,
            0 70%,
            0 35%,
            20% 10%
        );
        clip-path: polygon(
            50% 0,
            80% 10%,
            100% 35%,
            100% 70%,
            80% 90%,
            50% 100%,
            20% 90%,
            0 70%,
            0 35%,
            20% 10%
        );
    } @else if $shape == diamond {
        -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    } @else if $shape == star {
        -webkit-clip-path: polygon(
            50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%
        );
        clip-path: polygon(
            50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%
        );
    } @else if $shape == heart {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'><path fill='black' d='M23.6 0c-3.4 0-6.3 2.7-7.6 5.6C14.7 2.7 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.4 9.5 11.9 16 21.2 6.5-9.3 16-11.8 16-21.2 0-4.6-3.8-8.4-8.4-8.4Z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'><path fill='black' d='M23.6 0c-3.4 0-6.3 2.7-7.6 5.6C14.7 2.7 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.4 9.5 11.9 16 21.2 6.5-9.3 16-11.8 16-21.2 0-4.6-3.8-8.4-8.4-8.4Z'/></svg>");
    }
}