.icon::before, 
.intro-clip::after,
.btn_icon::before,
picture.click:before
{
    -webkit-mask-image: url('../img/svg_base_merge4.svg');
    mask-image: url('../img/svg_base_merge4.svg');
    background-repeat: repeat;
    mask-size: 2000% 1000%; /* Scale the mask image so each tile fills its container */
    mask-repeat: no-repeat;    
    display: block;
    background-color: var(--menu_button_fill);
}



  .btn_icon {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;                
    aspect-ratio: 1 / 1;         
    pointer-events: none;
    /* overflow: hidden; */
  }





 .intro-clip::after,
 .icon::before,
 .btn_icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 0;
    padding-top: 100%; 
    translate: -50% -50%;    
    pointer-events: none;
}


.btn_icon::before {
    width: 150%;
    padding-top: 150%; 
}




/* Icon-specific positioning (unchanged) */
.ico_cinegy::before {
    mask-position: calc(100% / 19 * 0) calc(100% / 9 * 0);
}



/* ========= FIRST LINE =========  */
    .ico_youtube::before {
        mask-position: calc(100% / 19 * 2) calc(100% / 9 * 0);
    }
    .ico_twitter::before {
        mask-position: calc(100% / 19 * 3) calc(100% / 9 * 0);
    }
    .ico_twitch::before {
        mask-position: calc(100% / 19 * 4) calc(100% / 9 * 0);
    }
    .ico_reddit::before {
        mask-position: calc(100% / 19 * 5) calc(100% / 9 * 0);
    }
    .ico_msnger::before {
        mask-position: calc(100% / 19 * 6) calc(100% / 9 * 0);
    }
    .ico_linkedin::before {
        mask-position: calc(100% / 19 * 7) calc(100% / 9 * 0);
    }
    .ico_instagram::before {
        mask-position: calc(100% / 19 * 8) calc(100% / 9 * 0);
    }
    .ico_google::before {
        mask-position: calc(100% / 19 * 9) calc(100% / 9 * 0);
    }
    .ico_github::before {
        mask-position: calc(100% / 19 * 10) calc(100% / 9 * 0);
    }
    .ico_facebook::before {
        mask-position: calc(100% / 19 * 11) calc(100% / 9 * 0);
    }
    .ico_nugged::before {
        mask-position: calc(100% / 19 * 12) calc(100% / 9 * 0);
    }

/* ========= SECOND LINE =========  */

    .ico_image::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 1);
    }

    .ico_media::before {
        mask-position: calc(100% / 19 * 1) calc(100% / 9 * 1);
    }

    .ico_file::before {
        mask-position: calc(100% / 19 * 2) calc(100% / 9 * 1);
    }



/* ========= THIRD LINE =========  */

    .ico_menu::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 2);    
    }

    .ico_close::before {
        mask-position: calc(100% / 19 * 1) calc(100% / 9 * 2);    
    }
    
    .ico_login::before {
        mask-position: calc(100% / 19 * 2) calc(100% / 9 * 2);    
    }
    .ico_logout::before {
        mask-position: calc(100% / 19 * 3) calc(100% / 9 * 2);    
    }
    .ico_account::before {
        mask-position: calc(100% / 19 * 4) calc(100% / 9 * 2);    
    }
    .ico_settings::before {
        mask-position: calc(100% / 19 * 5) calc(100% / 9 * 2);    
    }
    .ico_info::before {
        mask-position: calc(100% / 19 * 6) calc(100% / 9 * 2);    
    }
    .ico_question::before {
        mask-position: calc(100% / 19 * 7) calc(100% / 9 * 2);    
    }
    .ico_password::before {
        mask-position: calc(100% / 19 * 8) calc(100% / 9 * 2);    
    }
    .ico_cartwheel::before {
        mask-position: calc(100% / 19 * 9) calc(100% / 9 * 2);    
    }
    .ico_submenu::before {
        mask-position: calc(100% / 19 * 10) calc(100% / 9 * 2);    
    }         

/* ========= FORTH LINE =========  */

    .intro-clip::after,
    .ico_play::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 3);    
    }
    .ico_pause::before {
        mask-position: calc(100% / 19 * 1) calc(100% / 9 * 3);    
    }
    .ico_stop::before {
        mask-position: calc(100% / 19 * 2) calc(100% / 9 * 3);    
    }
    .ico_play_lite::before {
        mask-position: calc(100% / 19 * 3) calc(100% / 9 * 3);    
    }
    .ico_download::before {
        mask-position: calc(100% / 19 * 4) calc(100% / 9 * 3);    
    }                


/* ========= FIFTH LINE =========  */

    .ico_arrow_down::before,
    .ico_arrow_up::before,
    .ico_arrow_left::before,
    .ico_arrow_right::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 4);    
    }

    .ico_down::before,
    .ico_uo::before,
    .ico_left::before,
    .ico_right::before {
        mask-position: calc(100% / 19 * 1) calc(100% / 9 * 4);    
    }    

    .ico_chevron_down::before,
    .ico_chevron_up::before,
    .ico_chevron_left::before,
    .ico_chevron_right::before {
        mask-position: calc(100% / 19 * 2) calc(100% / 9 * 4);    
    }    

    .ico_thumbs_up::before,
    .ico_thumbs_down::before{
        mask-position: calc(100% / 19 * 3) calc(100% / 9 * 4);    
    }  
    
    



    .ico_arrow_up::before,
    .ico_uo::before,
    .ico_chevron_up::before,
    .ico_thumbs_down::before {
        scale: 1 -1;   
    }    

    .ico_left::before,    
    .ico_chevron_left::before,
    .ico_arrow_left::before {
        rotate: 90deg;  /* Rotate 90 degrees counterclockwise (left) */            
    }    

    .ico_chevron_right::before,
    .ico_right::before,
    .ico_arrow_right::before {
        rotate: -90deg;
    }    








/* ========= SIXTH LINE =========  */

    .ico_zoomin::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 5);    
    }
    .ico_zoomout::before {
        mask-position: calc(100% / 19 * 1) calc(100% / 9 * 5);    
    }
    .ico_search::before {
        mask-position: calc(100% / 19 * 2) calc(100% / 9 * 5);    
    }
    .ico_filter::before {
        mask-position: calc(100% / 19 * 3) calc(100% / 9 * 5);    
    }
    .ico_sort::before {
        mask-position: calc(100% / 19 * 4) calc(100% / 9 * 5);    
    }

    .ico_fullscreen::before,
    picture.click:before {
        mask-position: calc(100% / 19 * 5) calc(100% / 9 * 5);    
    }        

    .ico_enlarge::before {
        mask-position: calc(100% / 19 * 6) calc(100% / 9 * 5);    
    }

    .ico_scrnsmaller::before {
        mask-position: calc(100% / 19 * 7) calc(100% / 9 * 5);    
    }    

    .ico_scrnbigger::before {
        mask-position: calc(100% / 19 * 8) calc(100% / 9 * 5);    
    }

/* ========= SEVENT LINE =========  */

    .ico_star::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 6);    
    }
    .ico_star_half::before {
        mask-position: calc(100% / 19 * 1) calc(100% / 9 * 6);    
    }
    .ico_feed::before {
        mask-position: calc(100% / 19 * 2) calc(100% / 9 * 6);    
    }
    .ico_important::before {
        mask-position: calc(100% / 19 * 3) calc(100% / 9 * 6);    
    }            

    .ico_warning::before {
        mask-position: calc(100% / 19 * 4) calc(100% / 9 * 6);    
    }    

    .ico_link::before {
        mask-position: calc(100% / 19 * 5) calc(100% / 9 * 6);    
    }    

    .ico_eye::before {
        mask-position: calc(100% / 19 * 6) calc(100% / 9 * 6);    
    }    


    .ico_email::before {
        mask-position: calc(100% / 19 * 7) calc(100% / 9 * 6);    
    }    
    
    
    .ico_http::before {
        mask-position: calc(100% / 19 * 8) calc(100% / 9 * 6);    
    }    
    
    
    .ico_phone::before {
        mask-position: calc(100% / 19 * 9) calc(100% / 9 * 6);    
    }        

/* ========= EIGHT LINE =========  */

    .ico_::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 7);    
    }

/* ========= NINTH LINE =========  */

    .ico_::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 8);    
    }

/* ========= TENTH LINE =========  */

    .ico_::before {
        mask-position: calc(100% / 19 * 0) calc(100% / 9 * 9);    
    }






.ico_submenu.ico_close::before
{
    mask-position: calc(100% / 19 * 1) calc(100% / 9 * 2)!important;   
}