/* --------------- variable --------------- */
:root {
  --color-primary: #5842bc;
  --color-secondary: #02b5ff;
  --color-tertiary: #eaf3ee;
  --color-background: #fafafa;

  --color-white: #ffffff;
  --color-black: #061a23;

  --color-error: #cc332e;
  --color-disabled: #e6e6e6;
  --color-warning: #f1c21b;
  --color-success: #7dde86ff;

  --color-divider: #dbdbdb;

  --color-highlight: #eef7f2;

  --color-textDefault: #061a23;
  --color-textOnPrimary: #ffffff;

  --color-iconDefault: #5e6977;
  --color-iconOnPrimary: #ffffff;

  --color-borderDefault: #c5c5c5;
}

[data-theme="dark"] {
  --color-primary: #5842bc;
  --color-secondary: #02b5ff;
  --color-tertiary: #eaf3ee;
  --color-background: #061a23;

  --color-white: #242424;
  --color-black: #ffffff;

  --color-error: #ed3a3a;
  --color-disabled: #b3b3b3;
  --color-warning: #f1c21b;
  --color-success: #7dde86;

  --color-divider: #dbdbdb;

  --color-highlight: #3ddbd9;

  --color-textDefault: #e1e8ee;
  --color-textOnPrimary: #e1e8ee;
  --color-iconDefault: #5e6977;
  --color-borderDefault: #c5c5c5;
}

/* Following css should be remove with mixin or stylex variables */
.color-primary {
  color: var(--color-primary);
}

.border-primary {
  border-color: var(--color-primary);
}

.bg-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.border-secondary {
  border-color: var(--color-secondary);
}

.bg-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.color-tertiary {
  color: var(--color-tertiary);
}

.border-tertiary {
  border-color: var(--color-tertiary);
}

.bg-tertiary {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
}

.color-error {
  color: var(--color-error);
}

.border-error {
  border-color: var(--color-error);
}

.bg-error {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.color-disabled {
  color: var(--color-disabled);
}

.border-disabled {
  border-color: var(--color-disabled);
}

.bg-disabled {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
}

.color-warning {
  color: var(--color-warning);
}

.border-warning {
  border-color: var(--color-warning);
}

.bg-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.color-success {
  color: var(--color-success);
}

.border-success {
  border-color: var(--color-success);
}

.bg-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.color-highlight {
  color: var(--color-highlight);
}

.border-highlight {
  border-color: var(--color-highlight);
}

.bg-highlight {
  background-color: var(--color-highlight);
  border-color: var(--color-highlight);
}

.color-divider {
  color: var(--color-divider);
}

.color-text {
  color: var(--color-textDefault);
}

.color-icon {
  color: var(--color-iconDefault);
}

.color-border {
  color: var(--color-borderDefault);
}