@layer kz-components {
  .container {
    background-color: var(--background-color);
    border-width: var(--border-width-1);
    border-radius: var(--border-solid-border-radius);
    border-style: var(--border-style);
    margin-bottom: var(--spacing-24);
    color: var(--color-purple-800);
    border-color: var(--border-color);
  }

  .noMargin {
    margin: 0;
  }

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

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

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

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

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

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

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

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

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

  /* Border Style Variations */
  .solid {
    --border-style: solid;
  }

  .dashed {
    --border-style: dashed;
  }

  .none {
    --border-color: transparent;
    --border-style: none;
  }
}