html, body, :host, :root {
  /* by 0.0625 */
  --text-4px: 0.25rem;
  --text-5px: 0.3125rem;
  --text-6px: 0.375rem;
  --text-7px: 0.4375rem;
  --text-8px: 0.5rem;
  --text-9px: 0.5625rem;
  --text-10px: 0.625rem;
  --text-11px: 0.6875rem;
  --text-12px: 0.75rem;
  --text-13px: 0.8125rem;
  --text-14px: 0.875rem;
  --text-15px: 0.9375rem;
  --text-16px: 1rem;
  --text-18px: 1.125rem;
  --text-20px: 1.25rem;
  --text-24px: 1.5rem;
  --text-28px: 1.75rem;

  /* Semantic sizes using indirection to pixel variables */
  --headline-size: var(--text-28px);  /* 1.75rem */
  --h1-size: var(--text-24px);         /* 1.5rem */
  --h2-size: var(--text-20px);         /* 1.25rem */
  --h3-size: var(--text-18px);         /* 1.125rem */
  --h4-size: var(--text-16px);         /* 1rem */
  --h5-size: var(--text-14px);         /* 0.875rem */
  --h6-size: var(--text-12px);         /* 0.75rem */
  --h7-size: var(--text-11px);         /* 0.6875rem */
  --p-size: var(--text-10px);          /* 0.625rem */
  --caption-size: var(--text-9px);     /* 0.5625rem */
  --small-size: var(--text-9px);       /* 0.5625rem */

  /* Helvetica */
  --cap-height: 0.12666666666;
  --baseline: 0.15333333333;

  --font-size: var(--p-size);
  --line-height-ratio: 1.4;
}

/*
 * 0.375 = 6px
 * 0.4375 = 7px
 * 0.5rem = 8px
 * 0.5625rem = 9px
 * 0.625rem = 10px
 * 0.6875rem = 11px
 * 0.75rem = 12px
 * 0.875rem = 14px
 * 0.9375rem = 15px
 * 1rem = 16px
 * 1.125 = 18px
 * 1.25 = 20px
 */

/*
 * Typography
 */
.headline {
  --font-size: var(--headline-size);
}
.h1, h1 {
  --font-size: var(--h1-size);
  --line-height-ratio: 1.2;
}
.h2, h2 {
  --font-size: var(--h2-size);
  --line-height-ratio: 1.2;
}
.h3, h3 {
  --font-size: var(--h3-size);
  --line-height-ratio: 1.2;
}
.h4, h4 {
  --font-size: var(--h4-size);
  --line-height-ratio: 1.2;
}
.h5, h5 {
  --font-size: var(--h5-size);
  --line-height-ratio: 1.2;
}
.h6, h6 {
  --font-size: var(--h6-size);
  --line-height-ratio: 1.2;
}
.h7, h7 {
  --font-size: var(--h7-size);
  --line-height-ratio: 1.2;
}
a, .a, .p, .ul, .ol, p, ul, ol {
  --font-size: var(--p-size);
  --line-height-ratio: 1.4;
}
*[placeholder]::before {
  --font-size: var(--placeholder-size, var(--p-size));
}
.caption, std-caption {
  --font-size: var(--caption-size);
  --line-height-ratio: 1.1;
}
.small {
  --font-size: var(--small-size);
  --line-height-ratio: 1.1;
}
.text, std-text {
  --font-size: var(--small-size);
  --line-height-ratio: 1.1;
}

*[placeholder]::before,
button[text],
.button[text],
a,
.a,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h7,
.p,
.ul,
.ol,
.caption,
caption,
.label,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
p,
ul,
ol,
std-caption,
.small,
.text,
label {
  --font-height: calc(1 - var(--cap-height) - var(--baseline));
  --rfont-size: calc(var(--font-size) / var(--font-height));
  --line-height-offset: calc(
    (var(--line-height-ratio, 1.00) - 1) * var(--rfont-size) / 2
  );
  --rmargin-top: calc(
    -1 * var(--cap-height) * var(--rfont-size) - var(--line-height-offset)
      + var(--margin-top, 0px)
  );
  --rmargin-bottom: calc(
    -1 * var(--baseline) * var(--rfont-size) - var(--line-height-offset)
      + var(--margin-bottom, 0px)
  );

  font-weight: 400;
  font-size: var(--rfont-size);
  line-height: calc(var(--rfont-size) * var(--line-height-ratio, 1.00));
  margin: 0;
  padding: 0;
  margin-top: var(--rmargin-top);
  margin-bottom: var(--rmargin-bottom);
}

/************
Buttons
*************/

.button,
button {
  --font-size: var(--p-size);

  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-decoration: none;
  transition: background-color 0.15s ease;
  font-family: inherit;

  white-space: nowrap;
  text-overflow: ellipsis;

  padding: 8px 12px;
}
button:focus {
  outline: none;
}
a.button:visited {
  color: var(--primary-text-color);
}
.button:hover,
button:hover {
  background-color: var(--hover-color);
}
button[selected] {
  background-color: var(--selected-color);
}

button[primary],
.button[primary] {
  background-color: var(--primary-button-background-color);
  color: var(--inverse-text-color);
}

button[primary]:hover,
.button[primary]:hover {
  background-color: var(--color);
}

button[secondary],
.button[secondary] {
  background-color: var(--secondary-button-background-color);
  color: var(--secondary-text-color);
}

button[secondary]:hover,
.button[secondary]:hover {
  background-color: var(--selected-color);
}

button[flat],
.button[flat] {
  color: var(--tertiary-text-color);
  text-decoration: none;
}

button[flat]:hover,
.button[flat]:hover {
  background-color: var(--hover-color);
}

button[destructive],
.button[destructive] {
  background: var(--red);
  color: var(--inverse-text-color);
}

hr {
  flex-shrink: 0;
  background-color: var(--divider);
  height: 1px;
  width: 100%;
  outline: none;
  border: none;
  margin-top: 4px;
  margin-bottom: 4px;
}

std-row,
.row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
std-col,
.col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
std-spacer {
  flex-grow: 1;
}

std-inline-block {
  display: inline-block;
}

*::-webkit-scrollbar {
  display: none;
}

* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

a {
  text-decoration: none;
  color: var(--primary-text-color);
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--primary-text-color);
}

/***********
Input
************/

input::placeholder {
  color: var(--tertiary-text-color);
}