@layer kz-components {
  .wrapper {
    color: var(--color-purple-800);
    border: var(--border-width-1) solid var(--card-border-color);
    background-color: var(--card-background-color);
    border-radius: var(--border-solid-border-radius);
    box-shadow: var(--card-box-shadow);

    --card-border-color: var(--color-gray-500);
    --card-background-color: var(--color-white);
    --card-box-shadow: var(--shadow-small-box-shadow);
  }

  .elevated {
    --card-box-shadow: var(--shadow-large-box-shadow);
  }

  .blue {
    --card-background-color: var(--color-blue-100);
    --card-border-color: var(--color-blue-400);
  }

  .gray {
    --card-background-color: var(--color-gray-200);
    --card-border-color: var(--color-gray-500);
  }

  .green {
    --card-background-color: var(--color-green-100);
    --card-border-color: var(--color-green-500);
  }

  .orange {
    --card-background-color: var(--color-orange-100);
    --card-border-color: var(--color-orange-600);
  }

  .purple {
    --card-background-color: var(--color-purple-100);
    --card-border-color: var(--color-purple-400);
  }

  .red {
    --card-background-color: var(--color-red-100);
    --card-border-color: var(--color-red-500);
  }

  .white {
    --card-background-color: var(--color-white);
    --card-border-color: var(--color-gray-500);
  }

  .yellow {
    --card-background-color: var(--color-yellow-100);
    --card-border-color: var(--color-yellow-700);
  }
}