@import '~elements-sk/colors';

paramset-sk {
  td,
  th {
    padding: 0.1em;
  }

  th {
    text-align: left;
  }

  div {
    display: inline-block;
    padding: 0.2em;
  }

  .clickable tr:not(:nth-child(1)) th,
  .clickable div {
    cursor: pointer;
    color: var(--primary, --blue);
  }

  .clickable tr:not(:nth-child(1)) th:hover,
  .clickable div:hover {
    text-decoration: underline;
  }

  .clickable_values div {
    cursor: pointer;
    color: var(--primary, --blue);
  }

  .clickable div.highlight,
  .clickable_values div.highlight {
    color: var(--secondary, --orange);
    animation-duration: 100ms;
    animation-name: flash;
    animation-timing-function: linear;
  }

  .clickable_values div:hover {
    text-decoration: underline;
  }

  @keyframes flash {
    from {
      background-color: var(--surface, --white);
    }
    to {
      background-color: var(--surface-1dp, --orange);
    }
  }

  tr:nth-child(even) {
    background-color: var(--surface-1dp, --dark-white);
  }
}