/**
 * 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-noun-email-7979298::after {
  mask-image: url('../icons-library/assets/noun-email-7979298.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-email-7979298.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-noun-question-8225549::after {
  mask-image: url('../icons-library/assets/noun-question-8225549.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-question-8225549.svg');
}

.icon-noun-search-5780836::after {
  mask-image: url('../icons-library/assets/noun-search-5780836.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-search-5780836.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');
}

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

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

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

.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-university-7881250::after {
  mask-image: url('../icons-library/assets/noun-university-7881250.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-university-7881250.svg');
}

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

.icon-noun-website-8095407::after {
  mask-image: url('../icons-library/assets/noun-website-8095407.svg');
  -webkit-mask-image: url('../icons-library/assets/noun-website-8095407.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');
}

/* ======= 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%);
  }
}