@import 'elements-sk/themes/themes';

body,
html {
  background-color: var(--background);
  color: var(--on-background);
  fill: var(--on-background);
  min-width: fit-content;
  min-height: fit-content;
}

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

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

.bg-failure {
  background-color: var(--failure-alpha);
}

.bg-mishap {
  background-color: var(--unexpected-alpha);
}

.bg-unknown {
  background-color: var(--unexpected-alpha);
}

:root {
  --primary: var(--light-green-700);
  // TODO(westont): Move to named colors, unify theme.
  --secondary: #e6ab02;

  --success: rgb(102, 166, 30);
  --success-alpha: rgba(102, 166, 30, 0.3);
  --warning: var(--orange-400);
  --warning-alpha: var(--orange-a200);
  --failure: rgb(217, 95, 2);
  --failure-alpha: rgba(217, 95, 2, 0.3);
  --unexpected: rgb(117, 112, 179);
  --unexpected-alpha: rgba(117, 112, 179, 0.3);
  --disabled: var(--grey-500);
  --disabled-alpha: rgba(117, 117, 117, 0.3);

  .darkmode {
    --success-alpha: rgba(102, 166, 30, 0.9);
    --failure-alpha: rgba(217, 95, 2, 0.9);
    --unexpected-alpha: rgba(117, 112, 179, 0.9);
    --disabled-alpha: rgba(117, 117, 117, 0.9);
  }
}