/* Menu icons */
:root {
   --icon-bathroom: url('../images/icon/bathroom.svg');
   --icon-fasad: url('../images/icon/fasad.svg');
   --icon-furnitura: url('../images/icon/furnitura.svg');
   --icon-glass: url('../images/icon/glass.svg');
   --icon-hanger: url('../images/icon/hanger.svg');
   --icon-light: url('../images/icon/light.svg');
   --icon-materials: url('../images/icon/materials.svg');
   --icon-mebel: url('../images/icon/mebel.svg');
   --icon-metal: url('../images/icon/metal.svg');
   --icon-picture: url('../images/icon/picture.svg');
   --icon-profile: url('../images/icon/profile.svg');
   --icon-tag: url('../images/icon/tag.svg');
   --icon-empty: url('../images/icon/empty.svg');
   --icon-scut: url('../images/icon/scut.svg');
   --icon-pcut: url('../images/icon/pcut.svg');
   --icon-afasad: url('../images/icon/afasad.svg');
   --icon-aframe: url('../images/icon/aframe.svg');
   --icon-desk: url('../images/icon/desk.svg');
   --icon-poslugi: url('../images/icon/poslugi.svg');
}
.icon-menu, .icon-button, .icon-marker {
   display: inline-block;
   position: relative;
   width: 24px;
   height: 24px;
   transition: color 0.3s ease;
}

.icon-marker {
   width: 18px;
   height: 18px;
}

.icon-button, .icon-marker {
   transform: translateY(-1px);
}

@media (max-width: 760px) {
   .icon-menu, .icon-button, .icon-marker {
      width: 20px;
      height: 20px;
   }
}

.icon-menu[class*="bathroom"]:before,
.icon-menu[class*="fasad"]:before,
.icon-menu[class*="furnitura"]:before,
.icon-menu[class*="glass"]:before,
.icon-menu[class*="hanger"]:before,
.icon-menu[class*="light"]:before,
.icon-menu[class*="materials"]:before,
.icon-menu[class*="mebel"]:before,
.icon-menu[class*="metal"]:before,
.icon-menu[class*="picture"]:before,
.icon-menu[class*="profile"]:before,
.icon-menu[class*="tag"]:before,
.icon-menu[class*="empty"]:before,
.icon-menu[class*="poslugi"]:before,
.icon-button[class*="scut"]:before,
.icon-button[class*="pcut"]:before,
.icon-button[class*="afasad"]:before,
.icon-button[class*="aframe"]:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: currentColor;
   mask-size: contain;
   mask-position: center;
   mask-repeat: no-repeat;
   -webkit-mask-size: contain;
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
}

.icon-marker[class*="scut"]:before,
.icon-marker[class*="pcut"]:before,
.icon-marker[class*="afasad"]:before,
.icon-marker[class*="desk"]:before,
.icon-marker[class*="aframe"]:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   mask-size: contain;
   mask-position: center;
   mask-repeat: no-repeat;
   -webkit-mask-size: contain;
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
}

.icon-marker.icon-circular-saw:before {
   color: #000;
}

.icon-menu.bathroom:before {
   margin-top: -2px;
   mask-image: var(--icon-bathroom);
   -webkit-mask-image: var(--icon-bathroom);
}

.icon-menu.fasad:before {
   mask-image: var(--icon-fasad);
   -webkit-mask-image: var(--icon-fasad);
}

.icon-menu.furnitura:before {
   mask-image: var(--icon-furnitura);
   -webkit-mask-image: var(--icon-furnitura);
}

.icon-menu.glass:before {
   mask-image: var(--icon-glass);
   -webkit-mask-image: var(--icon-glass);
}

.icon-menu.hanger:before {
   mask-image: var(--icon-hanger);
   -webkit-mask-image: var(--icon-hanger);
}

.icon-menu.light:before {
   mask-image: var(--icon-light);
   -webkit-mask-image: var(--icon-light);
}

.icon-menu.materials:before {
   mask-image: var(--icon-materials);
   -webkit-mask-image: var(--icon-materials);
}

.icon-menu.mebel:before {
   margin-top: -3px;
   mask-image: var(--icon-mebel);
   -webkit-mask-image: var(--icon-mebel);
}

.icon-menu.metal:before {
   mask-image: var(--icon-metal);
   -webkit-mask-image: var(--icon-metal);
}

.icon-menu.picture:before {
   mask-image: var(--icon-picture);
   -webkit-mask-image: var(--icon-picture);
}

.icon-menu.profile:before {
   mask-image: var(--icon-profile);
   -webkit-mask-image: var(--icon-profile);
}

.icon-menu.tag:before {
   mask-image: var(--icon-tag);
   -webkit-mask-image: var(--icon-tag);
}

.icon-menu.empty::before {
   mask-image: var(--icon-empty);
   -webkit-mask-image: var(--icon-empty);
}

.icon-menu.poslugi:before {
   mask-image: var(--icon-poslugi);
   -webkit-mask-image: var(--icon-poslugi);
}

.icon-button.scut:before {
   mask-image: var(--icon-scut);
   -webkit-mask-image: var(--icon-scut);
}

.icon-button.pcut:before {
   mask-image: var(--icon-pcut);
   -webkit-mask-image: var(--icon-pcut);
}

.icon-button.afasad:before {
   mask-image: var(--icon-afasad);
   -webkit-mask-image: var(--icon-afasad);
}

.icon-button.aframe:before {
   mask-image: var(--icon-aframe);
   -webkit-mask-image: var(--icon-aframe);
}

.icon-marker.scut:before {
   mask-image: var(--icon-scut);
   -webkit-mask-image: var(--icon-scut);
}

.icon-marker.pcut:before {
   mask-image: var(--icon-pcut);
   -webkit-mask-image: var(--icon-pcut);
}

.icon-marker.afasad:before {
   mask-image: var(--icon-afasad);
   -webkit-mask-image: var(--icon-afasad);
}

.icon-marker.aframe:before {
   mask-image: var(--icon-aframe);
   -webkit-mask-image: var(--icon-aframe);
}

.icon-marker.desk:before {
   mask-image: var(--icon-desk);
   -webkit-mask-image: var(--icon-desk);
}