/*
Hey there! 👋
Are you looking for the CSS for the combobox? 
You can find it in the index.html file, in the <style> tag, in the Styling section.

The styles in this file are only for the page, not the combobox behavior or look.
*/

/* Page styling */
:root {
  --primary-color: #4cb5ae;
  --primary-color-dark: #3a8c87;
  --text-color: #f7f7ff;
  --background-color: #111;
  --background-color-dark: #000;
}

::selection {
  background: var(--primary-color);
  color: var(--background-color-dark);
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100vw;
  background: var(--background-color-dark);
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 100vw;
  background: var(--primary-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color-dark);
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: min(2.5rem, 5vw);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  max-width: min(80ch, 100dvw);
  margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Source Code Pro', monospace;
}

h1 {
  font-size: clamp(min(11vw, 3rem), 11vw, 3rem);
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

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

pre {
  background-color: var(--background-color-dark);
  color: var(--text-color);
  display: block;
  border-radius: 0.5rem;
  font-family: 'Source Code Pro', monospace;
  max-width: 90%;
  overflow-x: auto;
}

code {
  font-family: 'Source Code Pro', monospace;
}

:not(combobox-framework) > ul {
  list-style: none;
  padding-inline-start: 1.5rem;
}

:not(combobox-framework) > ul li {
  margin-block: 1rem;
}

.features li {
  padding-left: 0.5ch;
}

.features .accessible::marker {
  content: '🌟';
}

.features .styling::marker {
  content: '🎨';
}

section:has(h2):not(:has(h3)),
section:not(:has(h2)):has(h3) {
  border-left: 5px solid var(--primary-color);
  padding-left: 2rem;
  margin-left: -2rem;
}