/* Inputs */
input, select, :is(button, .button) {
  background: var(--cl-el);
  border: 1px solid var(--cl-fg);
  padding: 0.125rem;
}

:is(button, .button, input[type=submit]) {
  display: flex;
  text-align: center;
  text-decoration: none;
  align-items: center;
}

:is(button, .button, input[type=submit]):hover {
  background-color: var(--cl-hl);
  cursor: pointer;
}

/* Forms */
:is(form, .form) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-self: start;
}

:is(form, .form) > :is(p, label) {
  grid-column: 1;
}

:is(form, .form) > :is(button, .button, input[type=submit]) {
  grid-column: 1 / 3;
}

:is(form, .form) > :is(input[type=checkbox], :is(p, label)) {
  place-self: center start;
}

/* Tables */
table {
  border-collapse: collapse;
}

th, td {
  background: var(--cl-el);
  border: 1px solid var(--cl-fg);
  padding: 0.25rem;
}

tr:hover > td {
  background: var(--cl-hl);
}

tr:hover[onclick] > td {
  cursor: pointer;
}

/* Navigation */
nav {
  flex-flow: row nowrap;
  background: var(--cl-el);
}

nav > :is(button, .button, input[type=submit]) {
  border: none;
  padding: 0.5rem;
}