.d-icon {
  --#{$prefix}icon-color: var(--#{$prefix}icon-component-color, inherit);
  --#{$prefix}icon-bg-color: var(--#{$prefix}icon-component-bg-color, inherit);
  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}ref-spacer-5));
  --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
  --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);

  display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
  align-items: center;
  justify-content: center;
  padding: var(--#{$prefix}icon-padding);
  font-size: var(--#{$prefix}icon-size) !important; /* stylelint-disable-line declaration-no-important */
  line-height: 1;
  color: var(--#{$prefix}icon-color);
  background-color: var(--#{$prefix}icon-bg-color);
  border-radius: calc(var(--bs-icon-padding) * 4);

  // For Lucide icons (SVG)
  svg {
    display: block;
    width: var(--#{$prefix}icon-size);
    height: var(--#{$prefix}icon-size);
    color: var(--#{$prefix}icon-color);
  }
}

.d-icon-loading {
  animation: loading-icon var(--#{$prefix}icon-loading-duration) infinite linear;
}

@keyframes loading-icon {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}