.icon {
  /* 1. Define el tamaño del icono */
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;

  /* 2. ESTE ES EL COLOR QUE TENDRÁ TU ICONO */
  background-color: var(--color-neutral-50); /* Color por defecto: negro */

  /* 3. Aplica el SVG como una máscara */
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  
  /* Para máxima compatibilidad de navegadores */
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

.icon--logo {
  mask-image: url('../../img/assets/img/logos/alberto-muñoz-logo.svg');
  -webkit-mask-image: url('../../assets/img/logos/alberto-muñoz-logo.svg');
}

.icon--logo-clean {
  mask-image: url('../../assets/img/logos/alberto-muñoz-logo-clean.svg');
  -webkit-mask-image: url('../../assets/img/logos/alberto-muñoz-logo-clean.svg');
}

.icon--account-circle {
  mask-image: url('../icons/account_circle.svg');
  -webkit-mask-image: url('../icons/account_circle.svg');
}

.icon--shopping-cart {
  mask-image: url('../icons/shopping_cart.svg');
  -webkit-mask-image: url('../icons/shopping_cart.svg');
}

.icon--check {
  -webkit-mask-image: url('.../icons/check.svg');
  mask-image: url('../icons/check.svg');
}

.icon--compare-arrows {
  mask-image: url('../icons/compare_arrows.svg');
  -webkit-mask-image: url('../icons/compare_arrows.svg');
}

.icon--download {
  mask-image: url('../icons/download.svg');
  -webkit-mask-image: url('../icons/download.svg');
}

.icon--edit {
  mask-image: url('../icons/edit.svg');
  -webkit-mask-image: url('../icons/edit.svg');
}

.icon--heart {
  mask-image: url('../icons/heart.svg');
  -webkit-mask-image: url('../icons/heart.svg');
}

.icon--heart-fill {
  mask-image: url("../icons/heart-fill.svg");
  -webkit-mask-image: url("../icons/heart-fill.svg");
}

.icon--notifications {
  mask-image: url('../icons/notifications.svg');
  -webkit-mask-image: url('../icons/notifications.svg');
}

.icon--receipt {
  mask-image: url('../icons/receipt_long.svg');
  -webkit-mask-image: url('../icons/receipt_long.svg');
}

.icon--euro {
  mask-image: url('../icons/euro_symbol.svg');
  -webkit-mask-image: url('../icons/euro_symbol.svg');
}

.icon--arrow {
  mask-image: url('../icons/arrow_right_alt.svg');
  -webkit-mask-image: url('../icons/arrow_right_alt.svg');
}

.icon--facebook {
  mask-image: url('../icons/facebook.svg');
  -webkit-mask-image: url('../icons/facebook.svg');
}

.icon--youtube {
  mask-image: url('../icons/youtube.svg');
  -webkit-mask-image: url('../icons/youtube.svg');
}

.icon--x {
  mask-image: url('../icons/x.svg');
  -webkit-mask-image: url('../icons/x.svg');
}

.icon--menu-hamburguer {
  mask-image: url('../icons/menu-hamburguer.svg');
  -webkit-mask-image: url('../icons/menu-hamburguer.svg');
}

.icon--search {
  mask-image: url('../icons/search.svg');
  -webkit-mask-image: url('../icons/search.svg');
}

.icon--arrow-down {
  mask-image: url('../icons/keyboard_arrow_down.svg');
  -webkit-mask-image: url('../icons/keyboard_arrow_down.svg');
}

.icon--close {
  mask-image: url('../icons/close.svg');
  -webkit-mask-image: url('../icons/close.svg');
}

.icon--sand-clock {
  mask-image: url('../icons/sand-clock.svg');
  -webkit-mask-image: url('../icons/sand-clock.svg');
}

.icon--location {
  mask-image: url('../icons/location.svg');
  -webkit-mask-image: url('../icons/location.svg');
}

.icon--heart-fill {
  mask-image: url('../icons/heart-fill.svg');
  -webkit-mask-image: url('../icons/heart-fill.svg');
}

.icon--drafts {
  mask-image: url('../icons/drafts.svg');
  -webkit-mask-image: url('../icons/drafts.svg');
}

.icon--paper-lupe {
  mask-image: url('../icons/paper-lupe.svg');
  -webkit-mask-image: url('../icons/paper-lupe.svg');
}

.icon--computer-download {
  mask-image: url('../icons/computer-download.svg');
  -webkit-mask-image: url('../icons/computer-download.svg');
}

.icon--account-box {
  mask-image: url('../icons/account-box.svg');
  -webkit-mask-image: url('../icons/account-box.svg');
}

.icon--update-arrows {
  mask-image: url('../icons/update-arrows.svg');
  -webkit-mask-image: url('../icons/update-arrows.svg');
}

.icon--eye {
  mask-image: url('../icons/eye.svg');
  -webkit-mask-image: url('../icons/eye.svg');
}

.icon--eye-slash {
  mask-image: url('../icons/eye-slash.svg');
  -webkit-mask-image: url('../icons/eye-slash.svg');
}

.icon--grid-view {
  mask-image: url('../icons/grid-view.svg');
  -webkit-mask-image: url('../icons/grid-view.svg');
}

.icon--list-view {
  mask-image: url('../icons/list-view.svg');
  -webkit-mask-image: url('../icons/list-view.svg');
}

.icon--plus-search {
  mask-image: url("../icons/plus-search.svg");
  -webkit-mask-image: url("../icons/plus-search.svg");
}

.icon--delete {
  mask-image: url("../icons/delete.svg");
  -webkit-mask-image: url("../icons/delete.svg");
}

.icon--mail {
  mask-image: url("../icons/mail.svg");
  -webkit-mask-image: url("../icons/mail.svg");
}

.icon--logout {
  mask-image: url("../icons/logout.svg");
  -webkit-mask-image: url("../icons/logout.svg");
}