/* Default size for all SVGs - use !important to ensure it's applied */
svg {
  display: inline-block;
  flex-shrink: 0;
}

.icon {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
}

/* Colorize utilities for SVG icons */
.colorize--white {
  filter: invert(100%);
}

/* Auto-white icons in primary buttons */
.btn.primary .icon {
  filter: invert(100%);
}

/* Icon sizes */
.icon-xs,
.icon-xs svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  display: inline-block;
  flex-shrink: 0;
}

.icon-sm,
.icon-sm svg {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  display: inline-block;
  flex-shrink: 0;
}

.icon-small,
.icon-small svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  display: inline-block;
  flex-shrink: 0;
}

.icon-md,
.icon-md svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  display: inline-block;
  flex-shrink: 0;
}

.icon-medium,
.icon-medium svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  display: inline-block;
  flex-shrink: 0;
}

.icon-lg,
.icon-lg svg {
  width: 2rem !important;
  height: 2rem !important;
  max-width: 2rem !important;
  max-height: 2rem !important;
  display: inline-block;
  flex-shrink: 0;
}

.icon-large,
.icon-large svg {
  width: 2rem !important;
  height: 2rem !important;
  max-width: 2rem !important;
  max-height: 2rem !important;
  display: inline-block;
  flex-shrink: 0;
}

.icon-xl,
.icon-xl svg {
  width: 2.5rem !important;
  height: 2.5rem !important;
  max-width: 2.5rem !important;
  max-height: 2.5rem !important;
  display: inline-block;
  flex-shrink: 0;
}

/* Icon spacing in buttons */
.icon-left-spacing {
  margin-left: 0.5rem;
}

.icon-right-spacing {
  margin-right: 0.75rem;
}

.inline-icon {
  position: relative;
  top: 2px;
}