@charset "UTF-8";
/**
* @softbuilders/bo-icons — Styles
* CSS animations and utility classes for SbIcons.
* 
* Include in your app:
*   import '@softbuilders/bo-icons/styles';
*   // or in HTML:
*   <link rel="stylesheet" href="node_modules/@softbuilders/bo-icons/dist/styles/sb-icons.css">
*/
/* ─── Base ─── */
.sb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
  flex-shrink: 0;
}

.sb-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Sizes (utility classes) ─── */
.sb-icon--xs {
  width: 12px;
  height: 12px;
}

.sb-icon--sm {
  width: 16px;
  height: 16px;
}

.sb-icon--md {
  width: 24px;
  height: 24px;
}

.sb-icon--lg {
  width: 32px;
  height: 32px;
}

.sb-icon--xl {
  width: 48px;
  height: 48px;
}

.sb-icon--2xl {
  width: 64px;
  height: 64px;
}

/* ─── Pixel sizes for Kendo (override .k-icon fixed size) ─── */
/* Usage: .IconClass("sb-icon-download sb-size-12") */
[class*=sb-icon-].sb-size-12 svg {
  width: 12px !important;
  height: 12px !important;
}

[class*=sb-icon-].sb-size-14 svg {
  width: 14px !important;
  height: 14px !important;
}

[class*=sb-icon-].sb-size-16 svg {
  width: 16px !important;
  height: 16px !important;
}

[class*=sb-icon-].sb-size-18 svg {
  width: 18px !important;
  height: 18px !important;
}

[class*=sb-icon-].sb-size-20 svg {
  width: 20px !important;
  height: 20px !important;
}

[class*=sb-icon-].sb-size-24 svg {
  width: 24px !important;
  height: 24px !important;
}

[class*=sb-icon-].sb-size-28 svg {
  width: 28px !important;
  height: 28px !important;
}

[class*=sb-icon-].sb-size-32 svg {
  width: 32px !important;
  height: 32px !important;
}

[class*=sb-icon-].sb-size-40 svg {
  width: 40px !important;
  height: 40px !important;
}

[class*=sb-icon-].sb-size-48 svg {
  width: 48px !important;
  height: 48px !important;
}

[class*=sb-icon-].sb-size-64 svg {
  width: 64px !important;
  height: 64px !important;
}

/* ─── Animations ─── */
.sb-icon--spin {
  animation: sb-spin 1s linear infinite;
}

.sb-icon--pulse {
  animation: sb-pulse 1.5s ease-in-out infinite;
}

.sb-icon--bounce {
  animation: sb-bounce 1s ease infinite;
}

.sb-icon--shake {
  animation: sb-shake 0.5s ease-in-out infinite;
}

.sb-icon--fade-in {
  animation: sb-fade-in 0.3s ease-out;
}

.sb-icon--scale-in {
  animation: sb-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Hover effects (apply to parent) ─── */
.sb-icon-hover-grow:hover .sb-icon,
.sb-icon-hover-grow:hover sb-icon {
  transform: scale(1.15);
  transition: transform 0.2s ease;
}

.sb-icon-hover-color:hover .sb-icon,
.sb-icon-hover-color:hover sb-icon {
  --sb-icon-color: var(--sb-icon-hover-color, #3b82f6);
  transition: fill 0.2s ease;
}

/* ─── Kendo UI Integration ─── */
/* Override Kendo's fixed 16px on .k-svg-icon for sb-icons */
.k-svg-icon[class*=sb-icon-] {
  width: auto;
  height: auto;
}

.k-button .k-button-icon[class*=sb-icon-] > svg,
.k-button-md.k-icon-button .k-button-icon[class*=sb-icon-] > svg {
  width: 16px;
  height: 16px;
}

.k-grid .sb-icon,
.k-toolbar .sb-icon,
.k-button .sb-icon {
  vertical-align: middle;
  /*margin-right: 4px;*/
}

.k-grid-header .sb-icon {
  opacity: 0.7;
}

.k-button .sb-icon-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── Keyframes ─── */
@keyframes sb-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes sb-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes sb-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25%);
  }
}
@keyframes sb-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
@keyframes sb-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sb-scale-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}