/**
 * Icons Library - CSS Mask Technique with ::after pseudo-selector
 *
 * Usage: <span class="icon icon-heart"></span>
 *
 * The icon is now rendered using the ::after pseudo-selector with CSS mask.
 * This approach provides better semantic HTML and easier customization.
 *
 * Custom Properties Available:
 * --icon-size: Size of the icon (default: 1em)
 * --icon-color: Color of the icon (default: currentColor)
 * --icon-vertical-align: Vertical alignment (default: middle)
 *
 * @package coco-vv-tools
 */

/* Base icon class */
.icon {
  display: inline-block;
  position: relative;
  line-height: 1;
  vertical-align: middle;
  max-width: 100%;;

  /* CSS Custom Properties for easy customization */
  --icon-size: 15px;
  --icon-color: currentColor;
  --icon-vertical-align: middle;

  /* The icon container should be empty, so hide any text content */
  font-size: 0;

  svg {
    max-width: 100%;
  }
}

.icon::after {
  content: '';
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  max-width: 100%;;
  background-color: var(--icon-color);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  vertical-align: var(--icon-vertical-align);
}

/* Individual icon classes */
.icon-heart::after {
  mask-image: url('../icons-library/assets/heart.svg');
  -webkit-mask-image: url('../icons-library/assets/heart.svg');
}

.icon-home::after {
  mask-image: url('../icons-library/assets/home.svg');
  -webkit-mask-image: url('../icons-library/assets/home.svg');
}

.icon-star::after {
  mask-image: url("data:image/svg+xml,%3Csvg width='1200' height='1200' viewBox='0 0 1200 1200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m601.45 252c-4.5 0-8.625 2.5312-10.688 6.5625l-91.406 182.02-199.87 31.406v0.046875c-4.4531 0.70312-8.1094 3.8906-9.5156 8.2031s-0.23438 9.0469 2.9531 12.281l143.39 143.95-32.109 201.47-0.046875-0.046875c-0.70312 4.5 1.125 9 4.7812 11.672s8.4844 3.0469 12.469 0.98438l180-93.094 180 93.094h0.046875c4.0312 2.0625 8.8594 1.6875 12.469-0.98438 3.6562-2.6719 5.4844-7.1719 4.7812-11.672l-32.109-201.47 143.39-143.95v0.046875c3.1875-3.2344 4.3125-7.9688 2.9531-12.281-1.4062-4.3125-5.1094-7.5-9.5625-8.2031l-199.87-31.406-91.406-182.02v-0.046875c-2.0156-4.0312-6.1406-6.5625-10.641-6.5625zm0 38.719 83.484 166.36v-0.046875c1.7344 3.4688 5.0156 5.8594 8.8125 6.4688l182.63 28.734-131.02 131.48c-2.7188 2.7188-3.9844 6.6094-3.375 10.453l29.391 184.08-164.48-85.078c-3.4219-1.7344-7.4531-1.7344-10.875 0l-164.48 85.078 29.391-184.08h-0.046875c0.60938-3.8438-0.65625-7.7344-3.375-10.453l-131.02-131.48 182.63-28.734c3.7969-0.60938 7.0781-3 8.8125-6.4688zm-237.89 1.6406c-3.1875 0-6.2344 1.2656-8.4844 3.5156-4.6875 4.6875-4.6875 12.281 0 16.969l50.906 50.906c4.6875 4.6875 12.281 4.6875 16.969 0s4.6875-12.281 0-16.969l-50.906-50.906c-2.25-2.25-5.2969-3.5156-8.4844-3.5156zm474.28 0c-3.1875 0-6.2344 1.2656-8.4844 3.5156l-50.906 50.906c-4.6875 4.6875-4.6875 12.281 0 16.969s12.281 4.6875 16.969 0l50.906-50.906c4.6875-4.6875 4.6875-12.281 0-16.969-2.25-2.25-5.2969-3.5156-8.4844-3.5156zm-504.32 383.81v-0.046875c-1.0312 0-2.0625 0.14062-3.0938 0.42188l-69.562 18.609 0.046875 0.046875c-6.4219 1.6875-10.219 8.2969-8.4844 14.672 1.6875 6.4219 8.2969 10.219 14.672 8.4844l69.516-18.609h0.046875c6.375-1.7344 10.172-8.2969 8.4844-14.719-1.4062-5.25-6.1875-8.9062-11.625-8.9062zm534.37 0v-0.046875c-5.4375 0-10.172 3.6562-11.578 8.9062-1.7344 6.4219 2.0625 12.984 8.4844 14.719l69.516 18.609c3.0938 0.84375 6.375 0.42188 9.1406-1.1719s4.7812-4.2188 5.5781-7.3125c1.7344-6.375-2.0625-12.984-8.4844-14.672l-69.562-18.609v-0.046875c-0.98438-0.28125-2.0156-0.42188-3.0938-0.42188zm-266.48 175.78h0.046875c-6.6562 0-12 5.3438-12 12v72c0 3.1875 1.2656 6.2344 3.5156 8.4844s5.2969 3.5156 8.4844 3.5156 6.2344-1.2656 8.4844-3.5156 3.5156-5.2969 3.5156-8.4844v-72c0-3.1875-1.2656-6.2344-3.5156-8.4844s-5.2969-3.5156-8.4844-3.5156z' fill-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1200' height='1200' viewBox='0 0 1200 1200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m601.45 252c-4.5 0-8.625 2.5312-10.688 6.5625l-91.406 182.02-199.87 31.406v0.046875c-4.4531 0.70312-8.1094 3.8906-9.5156 8.2031s-0.23438 9.0469 2.9531 12.281l143.39 143.95-32.109 201.47-0.046875-0.046875c-0.70312 4.5 1.125 9 4.7812 11.672s8.4844 3.0469 12.469 0.98438l180-93.094 180 93.094h0.046875c4.0312 2.0625 8.8594 1.6875 12.469-0.98438 3.6562-2.6719 5.4844-7.1719 4.7812-11.672l-32.109-201.47 143.39-143.95v0.046875c3.1875-3.2344 4.3125-7.9688 2.9531-12.281-1.4062-4.3125-5.1094-7.5-9.5625-8.2031l-199.87-31.406-91.406-182.02v-0.046875c-2.0156-4.0312-6.1406-6.5625-10.641-6.5625zm0 38.719 83.484 166.36v-0.046875c1.7344 3.4688 5.0156 5.8594 8.8125 6.4688l182.63 28.734-131.02 131.48c-2.7188 2.7188-3.9844 6.6094-3.375 10.453l29.391 184.08-164.48-85.078c-3.4219-1.7344-7.4531-1.7344-10.875 0l-164.48 85.078 29.391-184.08h-0.046875c0.60938-3.8438-0.65625-7.7344-3.375-10.453l-131.02-131.48 182.63-28.734c3.7969-0.60938 7.0781-3 8.8125-6.4688zm-237.89 1.6406c-3.1875 0-6.2344 1.2656-8.4844 3.5156-4.6875 4.6875-4.6875 12.281 0 16.969l50.906 50.906c4.6875 4.6875 12.281 4.6875 16.969 0s4.6875-12.281 0-16.969l-50.906-50.906c-2.25-2.25-5.2969-3.5156-8.4844-3.5156zm474.28 0c-3.1875 0-6.2344 1.2656-8.4844 3.5156l-50.906 50.906c-4.6875 4.6875-4.6875 12.281 0 16.969s12.281 4.6875 16.969 0l50.906-50.906c4.6875-4.6875 4.6875-12.281 0-16.969-2.25-2.25-5.2969-3.5156-8.4844-3.5156zm-504.32 383.81v-0.046875c-1.0312 0-2.0625 0.14062-3.0938 0.42188l-69.562 18.609 0.046875 0.046875c-6.4219 1.6875-10.219 8.2969-8.4844 14.672 1.6875 6.4219 8.2969 10.219 14.672 8.4844l69.516-18.609h0.046875c6.375-1.7344 10.172-8.2969 8.4844-14.719-1.4062-5.25-6.1875-8.9062-11.625-8.9062zm534.37 0v-0.046875c-5.4375 0-10.172 3.6562-11.578 8.9062-1.7344 6.4219 2.0625 12.984 8.4844 14.719l69.516 18.609c3.0938 0.84375 6.375 0.42188 9.1406-1.1719s4.7812-4.2188 5.5781-7.3125c1.7344-6.375-2.0625-12.984-8.4844-14.672l-69.562-18.609v-0.046875c-0.98438-0.28125-2.0156-0.42188-3.0938-0.42188zm-266.48 175.78h0.046875c-6.6562 0-12 5.3438-12 12v72c0 3.1875 1.2656 6.2344 3.5156 8.4844s5.2969 3.5156 8.4844 3.5156 6.2344-1.2656 8.4844-3.5156 3.5156-5.2969 3.5156-8.4844v-72c0-3.1875-1.2656-6.2344-3.5156-8.4844s-5.2969-3.5156-8.4844-3.5156z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-external-link::after {
  mask-image: url('../icons-library/assets/external-link.svg');
  -webkit-mask-image: url('../icons-library/assets/external-link.svg');
}

.icon-plus::after {
  mask-image: url('../icons-library/assets/plus.svg');
  -webkit-mask-image: url('../icons-library/assets/plus.svg');
}

.icon-map-pin::after {
  mask-image: url('../icons-library/assets/map-pin.svg');
  -webkit-mask-image: url('../icons-library/assets/map-pin.svg');
}

.icon-noun-credit-cards-942014::after {
  mask-image: url('../icons-library/assets/noun-credit-cards-942014.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-credit-cards-942014.svg');
}

.icon-noun-hotel-8001875::after {
  mask-image: url('../icons-library/assets/noun-hotel-8001875.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-hotel-8001875.svg');
}

.icon-noun-lounge-8156984::after {
  mask-image: url('../icons-library/assets/noun-lounge-8156984.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-lounge-8156984.svg');
}

.icon-noun-parking-315025::after {
  mask-image: url('../icons-library/assets/noun-parking-315025.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-parking-315025.svg');
}

.icon-noun-parking-4374179::after {
  mask-image: url('../icons-library/assets/noun-parking-4374179.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-parking-4374179.svg');
}

.icon.icon-noun-thumbs-down-8023917{
  --icon-size: 2.5rem;
  transform: translateY(5%);
}
.icon-noun-thumbs-down-8023917::after {
  mask-image: url('../icons-library/assets/noun-thumbs-down-8023917.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-thumbs-down-8023917.svg');
}

.icon-noun-thumbs-up-7285299::after {
  mask-image: url('../icons-library/assets/noun-thumbs-up-7285299.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-thumbs-up-7285299.svg');
}

.icon-noun-washroom-6516949::after {
  mask-image: url('../icons-library/assets/noun-washroom-6516949.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-washroom-6516949.svg');
}

.icon-noun-wifi-2146863::after {
  mask-image: url('../icons-library/assets/noun-wifi-2146863.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-wifi-2146863.svg');
}

.icon-noun-slash-7392380::after {
  mask-image: url('../icons-library/assets/noun-slash-7392380.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-slash-7392380.svg');
}


/* ======= end of icon files ==== */

/*
 * Utility Classes for Icon Customization
 * These can be combined with icon classes for quick styling
 */

/* Size variations */
.icon-sm {
  --icon-size: 0.75rem;
}

.icon-lg {
  --icon-size: 1.5rem;
}

.icon-xl {
  --icon-size: 2rem;
}

.icon-2xl {
  --icon-size: 3rem;
}

/* Alignment variations */
.icon-align-top::after {
  --icon-vertical-align: top;
}

.icon-align-bottom::after {
  --icon-vertical-align: bottom;
}

.icon-align-baseline::after {
  --icon-vertical-align: baseline;
}

.wp-block-button .icon::after {
  transform: translateY(-2px);
}

p, h1, h2, h3, h4 {
  .icon {
    transform: translateY(-20%);
  }
}