.icon-wrapper-logo {
  width: 40px;
  height: 40px;
}

.icon-wrapper-logo .primary {
  fill: var(--blue-100);
}

.icon-wrapper-logo .secondary {
  fill: var(--blue-300); /* Red for secondary */
}

.icon-wrapper-logo-large {
  width: 60px;
  height: 60px;
}

.icon-wrapper-logo-large .primary {
  fill: var(--blue-100) !important; ;
}

.icon-wrapper-logo-large .secondary {
  fill: var(--blue-300); /* Red for secondary */
}

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

.icon-wrapper .primary {
  fill: var(--blue-200);
}

.icon-wrapper .secondary {
  fill: var(--blue-400); /* Red for secondary */
}


.icon-wrapper-positive {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.icon-wrapper-positive .primary {
  fill: var(--cyan-200);
}

.icon-wrapper-positive .secondary {
  fill: var(--cyan-800); /* Red for secondary */
}


.icon-wrapper-negative {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.icon-wrapper-negative .primary {
  fill: var(--red-200);
}

.icon-wrapper-negative .secondary {
  fill: var(--red-800); /* Red for secondary */
}