:root {
  --iconbox-border-radius: 12px;
  --iconbox-w: 48px;
  --iconbox-background: var(--color-neutral-300);
  --iconbox-background-gradient: url("https://caralegal.eu/wp-content/uploads/2025/10/iconbox-gradient.png.webp");
  --iconbox-background-overlay: rgba(253, 255, 229, 0.3);
  --iconbox-background-linked: var(--color-primary-flow-100);
  --iconbox-background-linked-hover: var(--color-primary-flow-default);
  --iconbox-icon-filter: invert(18%) sepia(21%) saturate(315%) hue-rotate(28deg) brightness(92%)
      contrast(84%);
  --iconbox-icon-filter-overlay: invert(89%) sepia(44%) saturate(470%) hue-rotate(18deg)
      brightness(110%) contrast(104%);
  --iconbox-icon-filter-linked: invert(36%) sepia(23%) saturate(2975%) hue-rotate(211deg)
      brightness(85%) contrast(89%);
  --iconbox-icon-filter-linked-hover: invert(90%) sepia(7%) saturate(538%) hue-rotate(200deg)
      brightness(99%) contrast(91%);
  --iconbox-icon-filter-linked-active: invert(97%) sepia(14%) saturate(854%) hue-rotate(180deg)
      brightness(100%) contrast(95%);
}

.iconbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--iconbox-w);
  min-width: var(--iconbox-w);
  max-width: var(--iconbox-w);
  aspect-ratio: 1;
  border-radius: var(--iconbox-border-radius);
  background: var(--iconbox-background);
}
.iconbox.ct-div-block {
  display: flex;
  align-items: center;
}
.iconbox.iconbox--has-shadow {
  box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
}
.iconbox .iconbox--icon {
  filter: var(--iconbox-icon-filter);
}
.iconbox.iconbox-gradient {
  --iconbox-icon-filter: var(--iconbox-icon-filter-overlay);
  position: relative;
}
.iconbox.iconbox-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--iconbox-border-radius);
  background: var(--iconbox-background-gradient);
  opacity: 0.8;
  z-index: 0;
}
.iconbox.iconbox-overlay {
  --iconbox-background: var(--iconbox-background-overlay);
  --iconbox-icon-filter: var(--iconbox-icon-filter-overlay);
  backdrop-filter: blur(24px);
}
.iconbox.iconbox-linked {
  --iconbox-background: var(--iconbox-background-linked);
  --iconbox-icon-filter: var(--iconbox-icon-filter-linked);
}
.iconbox.iconbox-linked:hover, .iconbox.iconbox-linked.iconbox-linked--active {
  --iconbox-background: var(--iconbox-background-linked-hover);
  --iconbox-icon-filter: var(--iconbox-icon-filter-linked-hover);
}
.iconbox.iconbox-linked.iconbox-linked--active {
  --iconbox-icon-filter: var(--iconbox-icon-filter-linked-active);
}