/* illustration styles */

.component-illustration {
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px rgba(186, 1, 1, 0.1) inset;
  display: block;
  height: 100px;
  width: 100px;
}

.component-illustration {
  .illustration-background {
    fill: var(--theme-background-color, #00a79f);
  }

  .illustration-light {
    fill: var(--theme-light-color, #fff);
  }

  .illustration-dark {
    fill: var(--theme-dark-color, #5e4f9c);
  }

  .illustration-accent {
    fill: var(--theme-accent-color, #c8b6f2);
  }

  .illustration-accent-stroke {
    color: var(--theme-accent-color, #c8b6f2);
    stroke: var(--theme-accent-color, #c8b6f2);
  }

  .illustration-light-stroke {
    stroke: var(--theme-light-color, #fff);
  }

  .illustration-dark-stroke {
    stroke: var(--theme-dark-color, #5e4f9c);
  }

  .illustration-white-stroke {
    stroke: var(--theme-white-color, #fff);
  }

  .illustration-white {
    fill: var(--theme-white-color, #fff);
  }

  .illustration-darker {
    fill: var(--theme-darker-color, #3355aa);
  }
}

.component-illustration.theme-red,
.component-illustration-theme-red {
  --theme-background-color: #ffd6d6;
  --theme-light-color: #fff1f1;
  --theme-dark-color: #b03030;
  --theme-accent-color: #f4a3a0;
  --theme-darker-color: #8b2323;
}

.component-illustration.theme-blue,
.component-illustration-theme-blue {
  --theme-background-color: #4f8aef;
  --theme-light-color: #f0f5ff;
  --theme-dark-color: #3355aa;
  --theme-accent-color: #cdd9ff;
  --theme-darker-color: #2a4477;
}

.component-illustration.theme-teal,
.component-illustration-theme-teal {
  --theme-background-color: #97d6d3;
  --theme-light-color: #e8f9f8;
  --theme-dark-color: #007a73;
  --theme-accent-color: #1f5552;
  --theme-darker-color: #005a55;
}

.component-illustration.theme-green,
.component-illustration-theme-green {
  --theme-background-color: #bde7bd;
  --theme-light-color: #e8fcef;
  --theme-dark-color: #1e6030;
  --theme-accent-color: #187c27;
  --theme-darker-color: #164a24;
}

.component-illustration.theme-yellow,
.component-illustration-theme-yellow {
  --theme-background-color: #f9be1b;
  --theme-light-color: #fff9e6;
  --theme-dark-color: #997a00;
  --theme-accent-color: #705000;
  --theme-darker-color: #5c4000;
}

.component-illustration.theme-purple,
.component-illustration-theme-purple {
  --theme-background-color: #ddccff;
  --theme-light-color: #f5f0ff;
  --theme-dark-color: #5533cc;
  --theme-accent-color: #c8b6f2;
  --theme-darker-color: #442299;
}

.component-illustration.theme-orange,
.component-illustration-theme-orange {
  --theme-background-color: #ffd8c2;
  --theme-light-color: #fff1e8;
  --theme-dark-color: #d8662a;
  --theme-accent-color: #f89c66;
  --theme-darker-color: #b05322;
}

.component-illustration.theme-pink,
.component-illustration-theme-pink {
  --theme-background-color: #ffd0f0;
  --theme-light-color: #fff0fa;
  --theme-dark-color: #b030b0;
  --theme-accent-color: #4a207f;
  --theme-darker-color: #8b238b;
}

.component-illustration.theme-brown,
.component-illustration-theme-brown {
  --theme-background-color: #e2c385;
  --theme-light-color: #fff7e8;
  --theme-dark-color: #7a6230;
  --theme-accent-color: #fff3a3;
  --theme-darker-color: #5e4a24;
}

.component-illustration.theme-gray,
.component-illustration-theme-gray {
  --theme-background-color: #d6d6d6;
  --theme-light-color: #f4f4f4;
  --theme-dark-color: #444444;
  --theme-accent-color: #6b8596;
  --theme-darker-color: #333333;
}