/* Dark mode colors. */
:root {
  --sl-color-accent-low: #1a2639;
  --sl-color-accent: #3e4a61;
  --sl-color-accent-high: #c9d1d9;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #f0f6fc;
  --sl-color-gray-2: #c9d1d9;
  --sl-color-gray-3: #8b949e;
  --sl-color-gray-4: #6e7681;
  --sl-color-gray-5: #484f58;
  --sl-color-gray-6: #30363d;
  --sl-color-black: #0d1117;
  --sl-label-api-color: #ff7b72;
  --sl-label-api-background-color: #ff7b72;
  --sl-label-version-color: #7ee787;
  --sl-label-version-background-color: #7ee787;
  --sl-label-package-color: #ffa657;
  --sl-label-package-background-color: #ffa657;
}

/* Light mode colors. */
:root[data-theme='light'] {
  --sl-color-accent-low: #d0e8ff;
  --sl-color-accent: #0969da;
  --sl-color-accent-high: #033d8b;
  --sl-color-white: #0d1117;
  --sl-color-gray-1: #30363d;
  --sl-color-gray-2: #484f58;
  --sl-color-gray-3: #6e7681;
  --sl-color-gray-4: #8b949e;
  --sl-color-gray-5: #c9d1d9;
  --sl-color-gray-6: #f0f6fc;
  --sl-color-gray-7: #f8f9fa;
  --sl-color-black: #ffffff;
  --sl-label-api-color: #cf222e;
  --sl-label-api-background-color: #cf222e;
  --sl-label-version-color: #2da44e;
  --sl-label-version-background-color: #2da44e;
  --sl-label-package-color: #d4a72c;
  --sl-label-package-background-color: #d4a72c;
}

:root {
  --purple-hsl: 212, 72%, 59%;
  --overlay-blurple: hsla(var(--purple-hsl), 0.4);
}

[data-has-hero] .page {
  background: linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
              radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
              radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
}

[data-has-hero] header {
  border-bottom: 1px solid transparent;
  background-color: transparent;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

[data-has-hero] .hero > img {
  filter: drop-shadow(0 0 3rem var(--overlay-blurple));
}

[data-page-title] {
  font-size: 3rem;
}

@media (max-width: 768px) {
  [data-page-title] {
    font-size: 2.5rem;
  }
}

.card-grid > .card {
  border-radius: 10px;
}

.card > .title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

.Label, .label {
  border: 1px solid;
  border-radius: 2em;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 18px;
  padding: 0 7px;
  white-space: nowrap;
}

.Label > a, .label > a {
  color: inherit;
  text-decoration: none;
}

.Label > a:hover, .label > a:hover {
  color: inherit;
  text-decoration: none;
}

.Label.Label--api {
  color: var(--sl-label-api-color);
  border-color: var(--sl-label-api-background-color);
}

.Label.Label--version {
  color: var(--sl-label-version-color);
  border-color: var(--sl-label-version-background-color);
}

.Label.Label--package {
  color: var(--sl-label-package-color);
  border-color: var(--sl-label-package-background-color);
}

.text-uppercase {
  text-transform: uppercase !important;
}

.language-icon {
  margin-bottom: -8px;
  float: right;
}

@media only screen and (max-width: 1023px) {
  .language-icon {
    display: none;
    float: none;
  }
}