@import '~elements-sk/colors';

triage2-sk {
  .positive {
    fill: var(--green);
  }

  .negative {
    fill: var(--red);
  }

  .untriaged {
    fill: var(--brown);
  }

  button:not([selected]) {
    fill: #bbb;
    background: #fff;
  }

  button[selected] {
    box-shadow: none;
  }

  .positive:hover,
  .negative:hover,
  .untriaged:hover,
  .positive[raised]:hover,
  .negative[raised]:hover,
  .untriaged[raised]:hover {
    background: #ddd;
  }

  button {
    padding: 0;
  }
}

.darkmode triage2-sk {
  background: var(--gray);

  button {
    box-shadow: 2px 2px 8px 0 var(--black);
    background: var(--gray);
  }

  .positive {
    background:: var(--green);
    fill: var(--white);
  }

  .negative {
    background: var(--red);
    fill: var(--white);
  }

  .untriaged {
    background: var(--brown);
    fill: var(--white);
  }

  button:not([selected]) {
    fill: var(--white);
    background: var(--gray);
  }

  button[selected] {
    box-shadow: none;
  }

  .positive:hover,
  .negative:hover,
  .untriaged:hover,
  .positive[raised]:hover,
  .negative[raised]:hover,
  .untriaged[raised]:hover {
    background: var(--light-gray);
  }
}