:root {
  --lu-icon-size: 20px;
  --lu-icon-stroke: 1.9;
  --lu-icon-ink: #080b33;
  --lu-icon-muted: #596179;
  --lu-icon-line: #e8eaf2;
  --lu-icon-soft: #f6f7fb;
  --lu-icon-purple: #5228df;
  --lu-icon-purple-2: #7c3bff;
  --lu-icon-green: #14aa68;
  --lu-icon-blue: #0968e8;
  --lu-icon-orange: #ff8a2a;
  --lu-icon-pink: #ff4f7b;
  --lu-icon-red: #e24b42;
}

.lu-icon,
.icon {
  width: var(--lu-icon-size);
  height: var(--lu-icon-size);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--lu-icon-stroke);
}

.lu-icon--xs {
  --lu-icon-size: 16px;
}

.lu-icon--sm {
  --lu-icon-size: 18px;
}

.lu-icon--md {
  --lu-icon-size: 24px;
}

.lu-icon--lg {
  --lu-icon-size: 32px;
}

.lu-icon--brand {
  color: var(--lu-icon-purple);
}

.lu-icon--success {
  color: var(--lu-icon-green);
}

.lu-icon--info {
  color: var(--lu-icon-blue);
}

.lu-icon--warning {
  color: var(--lu-icon-orange);
}

.lu-icon--critical {
  color: var(--lu-icon-red);
}

.lu-icon-badge {
  --lu-icon-size: 20px;
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--lu-icon-purple);
  background: #f0ebff;
  border: 1px solid rgba(82, 40, 223, 0.12);
  border-radius: 10px;
}

.lu-icon-badge[data-tone="success"] {
  color: var(--lu-icon-green);
  background: #e7f7ef;
  border-color: rgba(20, 170, 104, 0.14);
}

.lu-icon-badge[data-tone="info"] {
  color: var(--lu-icon-blue);
  background: #e8f0ff;
  border-color: rgba(9, 104, 232, 0.14);
}

.lu-icon-badge[data-tone="warning"] {
  color: var(--lu-icon-orange);
  background: #fff0e2;
  border-color: rgba(255, 138, 42, 0.16);
}

.lu-icon-badge[data-tone="critical"] {
  color: var(--lu-icon-red);
  background: #fff0ef;
  border-color: rgba(226, 75, 66, 0.14);
}