.icon-hm {
   width: 20px;
   height: 20px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.icon-hm::before {
   content: "";
   display: inline-block;
   width: 90%;
   height: 90%;
   -webkit-mask-size: contain;
   mask-size: contain !important;
   background-color: currentColor;
}

.icon-hm-house::before {
   -webkit-mask: url(../img/icons/house.svg) no-repeat center !important;
   mask: url(../img/icons/house.svg) no-repeat center !important;
}

.icon-hm-layout-grid::before {
   -webkit-mask: url(../img/icons/layout-grid.svg) no-repeat center !important;
   mask: url(../img/icons/layout-grid.svg) no-repeat center !important;
}

.icon-hm-newspaper::before {
   -webkit-mask: url(../img/icons/newspaper.svg) no-repeat center !important;
   mask: url(../img/icons/newspaper.svg) no-repeat center !important;
}

.icon-hm-shopping-basket::before {
   -webkit-mask: url(../img/icons/shopping-basket.svg) no-repeat center !important;
   mask: url(../img/icons/shopping-basket.svg) no-repeat center !important;
}

.icon-hm-user-round::before {
   -webkit-mask: url(../img/icons/user-round.svg) no-repeat center !important;
   mask: url(../img/icons/user-round.svg) no-repeat center !important;
}

.icon-hm-search::before {
   -webkit-mask: url(../img/icons/search.svg) no-repeat center !important;
   mask: url(../img/icons/search.svg) no-repeat center !important;
}

.icon-hm-headset::before {
   -webkit-mask: url(../img/icons/headset.svg) no-repeat center !important;
   mask: url(../img/icons/headset.svg) no-repeat center !important;
}


.icon-hm-cloud-sync::before {
   -webkit-mask: url(../img/icons/cloud-sync.svg) no-repeat center;
   mask: url(../img/icons/cloud-sync.svg) no-repeat center;
}

.icon-hm-trash-2::before {
   -webkit-mask: url(../img/icons/trash-2.svg) no-repeat center;
   mask: url(../img/icons/trash-2.svg) no-repeat center;
}

.icon-hm-square-pen::before {
   -webkit-mask: url(../img/icons/square-pen.svg) no-repeat center;
   mask: url(../img/icons/square-pen.svg) no-repeat center;
}

.icon-hm-circle-alert::before {
   -webkit-mask: url(../img/icons/circle-alert.svg) no-repeat center;
   mask: url(../img/icons/circle-alert.svg) no-repeat center;
}

.icon-hm-link::before {
   -webkit-mask: url(../img/icons/link.svg) no-repeat center;
   mask: url(../img/icons/link.svg) no-repeat center;
}

.icon-hm-rotate-ccw::before {
   -webkit-mask: url(../img/icons/rotate-ccw.svg) no-repeat center;
   mask: url(../img/icons/rotate-ccw.svg) no-repeat center;
}

.icon-hm-save::before {
   -webkit-mask: url(../img/icons/save.svg) no-repeat center;
   mask: url(../img/icons/save.svg) no-repeat center;
}

.icon-hm-octagon-alert::before {
   -webkit-mask: url("../img/icons/octagon-alert.svg") no-repeat center;
   mask: url("../img/icons/octagon-alert.svg") no-repeat center;
}


.btn-icon {
   width: 25px;
   height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 5px;
   /*border: 1px solid var(--border-color);*/
   border-radius: 5px;
}

.icon-primery {
   background: var(--accent-light);
   color: var(--accent);
}

.icon-danger {
   background: rgba(239, 68, 68, 0.1);
   color: var(--danger);
}

.icon-info {
   background: rgba(245, 158, 11, 0.1);
   color: var(--warning);
}

.icon-secondery {
   background: rgba(34, 197, 94, 0.1);
   color: var(--success);
}