/**
 * clair base
 */
@import url('./variables.css');

* {
  box-sizing: inherit;
}

ul {
  padding-left: 2em;
}

html {
  box-sizing: border-box;
  background: #fff;
  color: var(--text-color);
  font: var(--text-font);
  -webkit-font-smoothing: antialiased;
}

pre,
code {
  font-family: var(--mono-font);
}

*:not(pre) > code {
  margin: 0 1px;
  background: color(var(--text-color) l(95%));
  padding: 1px 0.25em;
  border-radius: 3px;
  font-size: 0.9em;
  border: 1px solid color(var(--text-color) l(90%));
}

pre {
  overflow: auto;
  background: color(var(--text-color) l(95%));
  padding: 1em;
  border-radius: 3px;
  font-size: 0.9em;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  margin-bottom: 1em;

  & th {
    text-align: left;
    border: none;
    padding: var(--table-cell-padding);
  }

  & td {
    border: none;
    border-top: 1px solid var(--table-border-color);
    padding: var(--table-cell-padding);
  }
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}