@import "../properties.css";

.icon svg {
  fill: currentColor;
}

.icon.icon-size-0-5 svg { width: var(--spacing-0-5); }
.icon.icon-size-1 svg { width: var(--spacing-1-5); }
.icon.icon-size-1-5 svg { width: var(--spacing-1-5); }
.icon.icon-size-1-8 svg { width: 14px; }
.icon.icon-size-2 svg { width: var(--spacing-2); }
.icon.icon-size-2-3 svg { width: 18px; }
.icon.icon-size-3 svg { width: var(--spacing-3); }
.icon.icon-size-4 svg { width: var(--spacing-4); }
.icon.icon-size-5 svg { width: var(--spacing-5); }
.icon.icon-size-6 svg { width: var(--spacing-6); }
.icon.icon-size-7 svg { width: var(--spacing-7); }
.icon.icon-size-8 svg { width: var(--spacing-8); }
.icon.icon-size-9 svg { width: var(--spacing-9); }
.icon.icon-size-10 svg { width: var(--spacing-10); }
.icon.icon-size-11 svg { width: var(--spacing-11); }
.icon.icon-size-12 svg { width: var(--spacing-12); }
.icon.icon-size-13 svg { width: var(--spacing-13); }
.icon.icon-size-14 svg { width: var(--spacing-14); }
.icon.icon-size-15 svg { width: var(--spacing-15); }
.icon.icon-size-20 svg { width: var(--spacing-20); }

.type-vai-2 { }

.icon-color-primary path,
.icon-color-primary.type-vai-2 path { color: var(--color-primary); fill: var(--color-primary); }
.icon-color-secondary-100 path { color: var(--color-secondary-100); fill: var(--color-secondary-100); }
.icon-color-secondary-200 path { color: var(--color-secondary-200); fill: var(--color-secondary-200); }
.icon-color-default path { color: var(--color-default); fill: var(--color-default); }
.icon-color-accent path { color: var(--color-accent); fill: var(--color-accent); }
.icon-color-disabled path { color: var(--color-disabled); fill: var(--color-disabled); }
.icon-color-warning path { color: var(--color-warning); fill: var(--color-warning); }
.icon-color-danger path { color: var(--color-danger); fill: var(--color-danger); }
.icon-color-success path { color: var(--color-success); fill: var(--color-success); }
.icon-color-info path { color: var(--color-info); fill: var(--color-info); }
.icon-color-white path { color: var(--color-white); fill: var(--color-white); }
.icon-color-grey-100 path { color: var(--color-grey-100); fill: var(--color-grey-100); }
.icon-color-grey-200 path { color: var(--color-grey-200); fill: var(--color-grey-200); }
.icon-color-grey-300 path { color: var(--color-grey-300); fill: var(--color-grey-300); }
.icon-color-grey-400 path { color: var(--color-grey-400); fill: var(--color-grey-400); }
.icon-color-grey-500 path { color: var(--color-grey-500); fill: var(--color-grey-500); }
.icon-color-grey-600 path { color: var(--color-grey-600); fill: var(--color-grey-600); }
.icon-color-grey-700 path { color: var(--color-grey-700); fill: var(--color-grey-700); }
.icon-color-grey-800 path { color: var(--color-grey-800); fill: var(--color-grey-800); }
.icon-color-grey-900 path { color: var(--color-grey-900); fill: var(--color-grey-900); }
.icon-color-black path { color: var(--color-black); fill: var(--color-black); }