/* text_defaults.css */
body {
  font-family: system-ui, sans-serif;
  font-size: 75%;
}

button {
  font-family: system-ui, sans-serif;
}

/* credits.css */
html {
  --google-blue-50: rgb(232, 240, 254);
  --google-blue-300: rgb(138, 180, 248);
  --google-blue-700: rgb(25, 103, 210);
  --google-grey-200: rgb(232, 234, 237);
  --google-grey-800: rgb(60, 64, 67);
  --google-grey-900: rgb(32, 33, 36);

  --interactive-color: var(--google-blue-700);
  --primary-color: var(--google-grey-900);

  --product-background: var(--google-blue-50);

  background: white;
}

@media (prefers-color-scheme: dark) {
  html {
    --interactive-color: var(--google-blue-300);
    --primary-color: var(--google-grey-200);

    --product-background: var(--google-grey-800);

    background: var(--google-grey-900);
  }
}

body {
  color: var(--primary-color);
  font-size: 84%;
  max-width: 1020px;
}

a {
  color: var(--interactive-color);
}

.open-sourced {
  clear: both;
  padding-top: 10px;
  font-size: 110%;
}

.page-title {
  float: left;
  font-size: 164%;
  font-weight: bold;
}

.product {
  background-color: var(--product-background);
  border-radius: 5px;
  margin-top: 16px;
  overflow: auto;
  padding: 2px;
}

.product .title {
  float: left;
  font-size: 110%;
  font-weight: bold;
  margin: 3px;
}

.product .homepage {
  color: var(--interactive-color);
  float: right;
  margin: 3px;
  text-align: end;
}

.product .homepage::before {
  content: ' - ';
}

.show-all,
.product .show {
  color: var(--interactive-color);
  float: right;
  margin: 3px;
  text-align: end;
  text-decoration: underline;
}

.license {
  border-radius: 3px;
  clear: both;
  display: none;
  padding: 16px;
}

.license h3 {
  margin-top: 0;
}

.license pre {
  white-space: pre-wrap;
}

#print-link {
  float: right;
  margin: 3px;
}

.dialog #print-link,
.dialog .homepage {
  display: none;
}

label.show + div.license {
  display: none;
}

label.show::after {
  content: 'show license';
  cursor: pointer;
}

label.show-all::after {
  content: 'show all licenses';
}

label.show-all:has(input:checked) ~ * label.show + div.license,
label.show:has(input:checked) + div {
  display: block;
}

label.show:has(input:checked)::after {
  content: 'hide license';
  cursor: pointer;
}

label.show-all:has(input:checked)::after {
  content: 'hide all licenses';
}

/* Strip out color and style when printing. We want dense B&W text. */
@media print {
  .license {
    display: block;
    font-size: smaller;
    padding: 0;
  }
  .product,
  a,
  body {
    color: black;
  }
  .product {
    background-color: white;
  }
  a {
    text-decoration: none;
  }
  .show,
  .product .homepage::before,
  #print-link {
    display: none;
  }
}

@media (forced-colors: active) {
  .product .show {
    color: LinkText;
  }
}