@charset 'utf-8';

/* layout mixins */
:root {
  /* horizontal margin, padding, spacing */
  --pad1: calc(1 * var(--padding));
  --pad2: calc(2 * var(--padding));
}

/* layout classes */

.inline {
  display: inline;
}

/* grid */
.grid {
  display: grid;
  grid-gap: var(--pad1);
  gap: var(--pad1);
  align-items: baseline;
}

.grid.col1 {
  grid-template-columns: max-content;
}

.grid.col1max {
  grid-template-columns: 100%;
}

.grid.col2 {
  grid-template-columns: repeat(2, max-content);
}

.grid.col6 {
  grid-template-columns: repeat(6, max-content);
}

/* flex */
.flex {
  display: flex;
  flex-flow: row nowrap;
}

.flex.row {
  flex-flow: row nowrap;
}

.flex.col {
  flex-flow: column nowrap;
}

.flex.start {
  align-items: start;
}

.flex.center {
  align-items: center;
}

.flex.end {
  align-items: end;
}

.flex.between {
  justify-content: space-between;
}

.flex.around {
  justify-content: space-around;
}

.flex.evenly {
  justify-content: space-evenly;
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex.nowrap {
  flex-wrap: nowrap;
}

.flex-grow1 {
  flex-grow: 1;
}

/* margin, padding, spacing */

.mh1 {
  margin: 0 var(--pad1);
}

.mv1 {
  margin: var(--pad1) 0;
}

.mh2 {
  margin: 0 var(--pad2);
}

.ph1 {
  margin: 0 var(--pad2);
}

.ph2 {
  padding: 0 var(--pad2);
}

.sh1 {
  margin: 0 var(--pad1);
  padding: 0 var(--pad1);
}

.sh2 {
  margin: 0 var(--pad2);
  padding: 0 var(--pad2);
}

.m1 {
  margin: var(--pad1);
}

.m2 {
  margin: var(--pad2);
}

.p1 {
  padding: var(--pad1);
}

.p2 {
  padding: var(--pad2);
}

.s1 {
  margin: var(--pad1);
  padding: var(--pad1);
}

.s2 {
  margin: var(--pad2);
  padding: var(--pad2);
}

/* width, height */

.w4 {
  width: 1rem;
}

.h4 {
  height: 1rem;
}

/* visuals */

.rounded {
  border-radius: 0.3rem;
}

.pointer {
  cursor: pointer;
}

/* text decoration */
.bold {
  font-weight: bold;
}

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

.strike {
  text-decoration: line-through;
}

/*** elements.css ***/

body {
  font-family: var(--font-family);
  color: var(--primary-color);
  background: var(--primary-background);
  user-select: none;
}

button {
  display: flex;
  flex-direction: row;
  align-items: center;

  margin: 0 var(--pad1);
  padding: var(--pad1);

  background: var(--button-background);
  border: thin solid;
  border-radius: var(--button-border-radius);
  border-color: var(--button-border-color);

  cursor: pointer;
}

button:hover {
  border-color: var(--button-hover-border-color);
  background: var(--button-hover-background);
}

button.transparent {
  border-color: transparent;
  background: transparent;
}

button.transparent:hover {
  border-color: var(--button-hover-border-color);
}

/*** components.css ***/

:root {
  --header-color: var(--strong-color);
  --header-background: var(--secondary-background);
  --header-shadow: var(--crisp-shadow);
  --header-height: 2rem;
  --header-padding: 0 var(--padding);
  --header-font-size: 1rem;

  --footer-color: var(--highlight-color);
  --footer-background: var(--secondary-background);
  --footer-shadow: var(--crisp-shadow);
  --footer-height: 2rem;
  --footer-padding: 0 var(--padding);
  --footer-font-size: 1rem;
}

/*** form ***/

:root {
  --form-header-size: 1rem;
}

form h1 {
  font-size: var(--form-header-size);
}

form label {
}

form .input,
form select {
  margin: var(--pad1);
  padding: var(--pad1);
  background: var(--input-background);
  border: thin solid;
  border-radius: var(--input-border-radius);
  border-color: var(--input-border-color);
  min-width: 4em;
}

form .required {
  background: var(--strong-background);
}

form .push-input {
  cursor: pointer;
}

form [type='checkbox'],
form [type='radio'] {
  width: 1.2rem;
  height: 1.2rem;
}