/* ----------------------------------
   1. Base Wrapper Component
---------------------------------- */
.ui-icn {
  /* Default variables for the pseudo-element */
  --icon-width: 24px;
  --icon-height: 24px;
  --icon-bg-color: transparent;
  --icon-hover-bg-color: transparent;

  /* Wrapper Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  /* Inherit transition to allow smooth hover state bubbling */
  transition: all 0.2s ease-in-out;
}

.ui-icn-wrap {
  --icon-text-gap: 10px;
  --icon-text-color: var(--clr-gray-dark);
  --icon-text-hover-color: var(--clr-primary);
  display: flex;
  align-items: center;
  gap: var(--icon-text-gap);
  color: var(--icon-text-color);
}

.ui-icn-wrap:hover {
  color: var(--icon-text-hover-color);
}

.ui-icn-wrap .ui-icn {
  pointer-events: none;
}

/* Modifier: Hides any standard text content visually */
.ui-icn__fs-zero {
  font-size: 0;
}

/* ----------------------------------
   2. Pseudo-Element (The Actual Icon)
---------------------------------- */
/* We default to ::before. You can easily switch this to ::after if preferred */
.ui-icn::before {
  content: "";
  /* Required to render pseudo-element */
  display: inline-block;

  /* Dimensions map to variables */
  width: var(--icon-width);
  height: var(--icon-height);

  /* Background properties map to variables */
  background-color: var(--icon-bg-color);
  background-image: var(--icon-bg-image);

  /* Image sizing/position utilities */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  transition: all 0.2s ease-in-out;
}

/* Hover state triggered on wrapper, modifying the pseudo-element */
.ui-icn-wrap:hover .ui-icn::before,
.ui-icn:hover::before {
  background-color: var(--icon-hover-bg-color);
  background-image: var(--icon-hover-bg-image, var(--icon-bg-image));
}

/* ----------------------------------
   3. Specific Icon Modifiers
---------------------------------- */
.ui-icn__zoom {
  /* Set images for the pseudo-element to pick up */
  --icon-bg-image: url('/themes/custom/gff/components/redesign/elements/ui-icons/img/zoom/default.svg');
  --icon-hover-bg-image: url('/themes/custom/gff/components/redesign/elements/ui-icons/img/zoom/hover.svg');

  /* Optional: Set specific dimensions or colors for just the zoom element */
  --icon-width: 53px;
  --icon-height: 53px;
}

.ui-icn__compare {
  /* Set images for the pseudo-element to pick up */
  --icon-bg-image: url('/themes/custom/gff/components/redesign/elements/ui-icons/img/compare/default.svg');
  --icon-hover-bg-image: url('/themes/custom/gff/components/redesign/elements/ui-icons/img/compare/hover.svg');
  --icon-width: 34px;
  --icon-height: 34px;
}

.ui-icn__back {
  /* Set images for the pseudo-element to pick up */
  --icon-bg-image: url('/themes/custom/gff/components/redesign/elements/ui-icons/img/back/default.svg');
  --icon-hover-bg-image: url('/themes/custom/gff/components/redesign/elements/ui-icons/img/back/hover.svg');
  --icon-width: 30px;
  --icon-height: 30px;
}