/**
 * REV1714 icon sizing and hover animations.
 * Pair with inline SVGs from src/components/icons/
 */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
  transition: transform var(--dur-3, 400ms) var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}

.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

/* Subtle hover animations */
.btn:hover .icon-arrow-right,
a:hover .icon-arrow-right {
  transform: translateX(3px);
}

.btn:hover .icon-arrow-left,
a:hover .icon-arrow-left {
  transform: translateX(-3px);
}

.accordion.expanded .icon-chevron-down,
[data-expanded="true"] .icon-chevron-down {
  transform: rotate(180deg);
}

.btn:hover .icon-send {
  transform: translate(2px, -2px);
}

.btn:hover .icon-download {
  transform: translateY(2px);
}

.btn:hover .icon-upload {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .icon {
    transition-duration: 0.01ms;
  }
}