@byline/ui 1.7.1 → 1.7.2

package/dist/styles/styles.css

@@ -1,3 +1,5 @@
+@layer base;
+
 @layer byline-base {
   @keyframes enterFromRight {
     from {
@@ -381,6 +383,96 @@
   }
 }
 
+@layer components;
+
+@layer byline-components {
+  .component--hamburger {
+    z-index: 200;
+    cursor: pointer;
+    width: 42px;
+    height: 34px;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: #0000;
+    border: 0;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    transition-property: opacity, filter;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .component--hamburger:active, .component--hamburger:focus {
+    border: .5px dashed #fff;
+    border-radius: 4px;
+    outline: none;
+  }
+
+  .component--hamburger .box {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+  }
+
+  .component--hamburger .inner {
+    margin-top: -1px;
+    transition-duration: 75ms;
+    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+    display: block;
+    top: 50%;
+  }
+
+  .component--hamburger .inner, .component--hamburger .inner:before, .component--hamburger .inner:after {
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .component--hamburger .inner:before, .component--hamburger .inner:after {
+    content: "";
+    display: block;
+  }
+
+  .component--hamburger .inner:before {
+    transition: top 75ms .12s, opacity 75ms;
+    top: -8px;
+  }
+
+  .component--hamburger .inner:after {
+    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    bottom: -8px;
+  }
+
+  .component--hamburger.is_active .inner {
+    transition-delay: .12s;
+    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+    transform: rotate(45deg);
+  }
+
+  .component--hamburger.is_active .inner:before {
+    opacity: 0;
+    transition: top 75ms, opacity 75ms .12s;
+    top: 0;
+  }
+
+  .component--hamburger.is_active .inner:after {
+    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+    bottom: 0;
+    transform: rotate(-90deg);
+  }
+}
+
 @layer byline-functional {
   :root {
     --primary: var(--primary-500);
@@ -1356,1557 +1448,140 @@
   }
 }
 
-@layer byline-utilities {
-  .sr-only {
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    position: absolute;
-    overflow: hidden;
-  }
-
-  .background {
-    background-color: var(--background);
-  }
-
-  .foreground {
-    color: var(--foreground);
-  }
-
-  .text {
-    color: var(--text);
-  }
-
-  .headings {
-    color: var(--headings);
-  }
-
-  .muted {
-    color: var(--muted);
-    font-size: .925rem;
-  }
-
-  .external-link:after {
-    content: "";
-    background-image: url("/external-link-light.svg");
-    background-position: 20%;
-    background-repeat: no-repeat;
-    background-size: 65%;
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: -5px;
-    display: inline-block;
-  }
-
-  .dark .external-link:after, [data-theme="dark"] .external-link:after {
-    background-image: url("/external-link-dark.svg");
-  }
-
-  .primary-strong {
-    background-color: var(--fill-primary-strong);
-    color: var(--text-on-primary-strong);
-  }
-
-  .primary-weak {
-    background-color: var(--fill-primary-weak);
-    color: var(--text-on-primary-weak);
-  }
-
-  .secondary-strong {
-    background-color: var(--fill-secondary-strong);
-    color: var(--text-on-secondary-strong);
-  }
-
-  .secondary-weak {
-    background-color: var(--fill-secondary-weak);
-    color: var(--text-on-secondary-weak);
-  }
-
-  .info-strong {
-    background-color: var(--fill-info-strong);
-    color: var(--text-on-info-strong);
-  }
-
-  .info-weak {
-    background-color: var(--fill-info-weak);
-    color: var(--text-on-info-weak);
-  }
-
-  .success-strong {
-    background-color: var(--fill-success-strong);
-    color: var(--text-on-success-strong);
-  }
-
-  .success-weak {
-    background-color: var(--fill-success-weak);
-    color: var(--text-on-success-weak);
-  }
-
-  .warning-strong {
-    background-color: var(--fill-warning-strong);
-    color: var(--text-on-warning-strong);
-  }
-
-  .warning-weak {
-    background-color: var(--fill-warning-weak);
-    color: var(--text-on-warning-weak);
-  }
-
-  .danger-strong {
-    background-color: var(--fill-danger-strong);
-    color: var(--text-on-danger-strong);
-  }
-
-  .danger-weak {
-    background-color: var(--fill-danger-weak);
-    color: var(--text-on-danger-weak);
-  }
-
-  .text-xs {
-    font-size: var(--font-size-xs);
-  }
-
-  .text-sm {
-    font-size: var(--font-size-sm);
-  }
-
-  .text-base {
-    font-size: var(--font-size-base);
-  }
-
-  .text-lg {
-    font-size: var(--font-size-lg);
-  }
-
-  .text-xl {
-    font-size: var(--font-size-xl);
-  }
-
-  .text-2xl {
-    font-size: var(--font-size-2xl);
-  }
-
-  .text-3xl {
-    font-size: var(--font-size-3xl);
-  }
-
-  .text-4xl {
-    font-size: var(--font-size-4xl);
-  }
-
-  .text-5xl {
-    font-size: var(--font-size-5xl);
-  }
-
-  .text-6xl {
-    font-size: var(--font-size-6xl);
-  }
-
-  .text-7xl {
-    font-size: var(--font-size-7xl);
-  }
-
-  .text-8xl {
-    font-size: var(--font-size-8xl);
-  }
-
-  .font-light {
-    font-weight: var(--font-weight-light);
-  }
-
-  .font-normal {
-    font-weight: var(--font-weight-normal);
-  }
-
-  .font-medium {
-    font-weight: var(--font-weight-medium);
-  }
-
-  .font-semibold {
-    font-weight: var(--font-weight-semibold);
-  }
-
-  .font-bold {
-    font-weight: var(--font-weight-bold);
-  }
-
-  .font-extrabold {
-    font-weight: var(--font-weight-extrabold);
-  }
-
-  .font-ultrabold {
-    font-weight: var(--font-weight-ultrabold);
-  }
-
-  .leading-tight {
-    line-height: var(--line-height-tight);
-  }
-
-  .leading-snug {
-    line-height: var(--line-height-snug);
-  }
-
-  .leading-normal {
-    line-height: var(--line-height-normal);
-  }
-
-  .leading-relaxed {
-    line-height: var(--line-height-relaxed);
-  }
+@layer utilities, byline-utilities, theme;
 
-  .leading-loose {
-    line-height: var(--line-height-loose);
-  }
+@layer byline-theme {
+  @scope (.byline-ui) {
+    input:autofill, input:autofill:hover, input:autofill:focus, textarea:autofill, textarea:autofill:hover, textarea:autofill:focus, select:autofill, select:autofill:hover, select:autofill:focus {
+      -webkit-text-fill-color: black;
+      color: #000;
+      background-color: #fad9a7;
+      border: 1px solid #d89d3d;
+      transition: background-color 5000s ease-in-out;
+      -webkit-box-shadow: inset 0 0 0 1000px #fff2dc;
+      box-shadow: inset 0 0 0 1000px #fff2dc;
+    }
 
-  .tracking-tight {
-    letter-spacing: var(--letter-spacing-tight);
+    .dark input:autofill, .dark input:autofill:hover, .dark input:autofill:focus, .dark textarea:autofill, .dark textarea:autofill:hover, .dark textarea:autofill:focus, .dark select:autofill, .dark select:autofill:hover, .dark select:autofill:focus, [data-theme="dark"] input:autofill, [data-theme="dark"] input:autofill:hover, [data-theme="dark"] input:autofill:focus, [data-theme="dark"] textarea:autofill, [data-theme="dark"] textarea:autofill:hover, [data-theme="dark"] textarea:autofill:focus, [data-theme="dark"] select:autofill, [data-theme="dark"] select:autofill:hover, [data-theme="dark"] select:autofill:focus {
+      border: 1px solid var(--theme-600);
+      -webkit-text-fill-color: white;
+      -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+      box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+      color: #fff;
+      background-color: #64646480;
+      transition: background-color 5000s ease-in-out;
+    }
   }
 
-  .tracking-normal {
-    letter-spacing: var(--letter-spacing-normal);
+  :root {
+    --scroll-bar-thumb: var(--theme-400);
+    --scroll-bar-track: var(--theme-600);
   }
 
-  .tracking-wide {
-    letter-spacing: var(--letter-spacing-wide);
+  :root.dark, :root[data-theme="dark"] {
+    --scroll-bar-thumb: var(--canvas-700);
+    --scroll-bar-track: var(--canvas-900);
   }
 
-  @media (width >= 40rem) {
-    .sm\:text-xs {
-      font-size: var(--font-size-xs);
-    }
-
-    .sm\:text-sm {
-      font-size: var(--font-size-sm);
-    }
-
-    .sm\:text-base {
-      font-size: var(--font-size-base);
+  @scope (.byline-ui) {
+    ::-webkit-scrollbar {
+      width: .6em;
+      height: .6em;
     }
 
-    .sm\:text-lg {
-      font-size: var(--font-size-lg);
+    ::-webkit-scrollbar-thumb {
+      background: var(--scroll-bar-thumb);
     }
 
-    .sm\:text-xl {
-      font-size: var(--font-size-xl);
+    ::-webkit-scrollbar-track {
+      background: var(--scroll-bar-track);
     }
 
-    .sm\:text-2xl {
-      font-size: var(--font-size-2xl);
+    ::-webkit-scrollbar-corner {
+      background: var(--scroll-bar-track);
     }
 
-    .sm\:text-3xl {
-      font-size: var(--font-size-3xl);
+    :scope {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
     }
 
-    .sm\:text-4xl {
-      font-size: var(--font-size-4xl);
+    .component--scroller, .dark .component--scroller, [data-theme="dark"] .component--scroller {
+      --scroll-bar-thumb: var(--scroll-bar-thumb);
+      --scroll-bar-track: var(--scroll-bar-track);
     }
 
-    .sm\:text-5xl {
-      font-size: var(--font-size-5xl);
-    }
-
-    .sm\:text-6xl {
-      font-size: var(--font-size-6xl);
-    }
-
-    .sm\:text-7xl {
-      font-size: var(--font-size-7xl);
-    }
-
-    .sm\:text-8xl {
-      font-size: var(--font-size-8xl);
-    }
-
-    .sm\:font-light {
-      font-weight: var(--font-weight-light);
-    }
-
-    .sm\:font-normal {
-      font-weight: var(--font-weight-normal);
-    }
-
-    .sm\:font-medium {
-      font-weight: var(--font-weight-medium);
-    }
-
-    .sm\:font-semibold {
-      font-weight: var(--font-weight-semibold);
-    }
-
-    .sm\:font-bold {
-      font-weight: var(--font-weight-bold);
-    }
-
-    .sm\:font-extrabold {
-      font-weight: var(--font-weight-extrabold);
-    }
-
-    .sm\:font-ultrabold {
-      font-weight: var(--font-weight-ultrabold);
-    }
-
-    .sm\:leading-tight {
-      line-height: var(--line-height-tight);
-    }
-
-    .sm\:leading-snug {
-      line-height: var(--line-height-snug);
-    }
-
-    .sm\:leading-normal {
-      line-height: var(--line-height-normal);
-    }
-
-    .sm\:leading-relaxed {
-      line-height: var(--line-height-relaxed);
-    }
-
-    .sm\:leading-loose {
-      line-height: var(--line-height-loose);
-    }
-
-    .sm\:tracking-tight {
-      letter-spacing: var(--letter-spacing-tight);
-    }
-
-    .sm\:tracking-normal {
-      letter-spacing: var(--letter-spacing-normal);
-    }
-
-    .sm\:tracking-wide {
-      letter-spacing: var(--letter-spacing-wide);
+    .component--scroller {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+      overflow-y: auto;
     }
   }
 
-  @media (width >= 48rem) {
-    .md\:text-xs {
-      font-size: var(--font-size-xs);
-    }
-
-    .md\:text-sm {
-      font-size: var(--font-size-sm);
-    }
-
-    .md\:text-base {
-      font-size: var(--font-size-base);
-    }
-
-    .md\:text-lg {
-      font-size: var(--font-size-lg);
-    }
-
-    .md\:text-xl {
-      font-size: var(--font-size-xl);
-    }
-
-    .md\:text-2xl {
-      font-size: var(--font-size-2xl);
-    }
-
-    .md\:text-3xl {
-      font-size: var(--font-size-3xl);
+  @scope (.byline-ui) {
+    :scope {
+      color: var(--text);
+      font-size: 1rem;
     }
 
-    .md\:text-4xl {
-      font-size: var(--font-size-4xl);
+    .not-dark {
+      color: var(--text);
     }
 
-    .md\:text-5xl {
-      font-size: var(--font-size-5xl);
+    ::selection {
+      background-color: var(--theme-600);
+      color: #fff;
     }
 
-    .md\:text-6xl {
-      font-size: var(--font-size-6xl);
+    .dark ::selection, [data-theme="dark"] ::selection {
+      background-color: var(--theme-200);
+      color: var(--gray-900);
     }
 
-    .md\:text-7xl {
-      font-size: var(--font-size-7xl);
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 600;
+      line-height: 1.125;
     }
 
-    .md\:text-8xl {
-      font-size: var(--font-size-8xl);
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.125;
     }
 
-    .md\:font-light {
-      font-weight: var(--font-weight-light);
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1.1;
     }
 
-    .md\:font-normal {
-      font-weight: var(--font-weight-normal);
+    h4 {
+      font-size: 1rem;
+      font-weight: 600;
+      line-height: 1.1;
     }
 
-    .md\:font-medium {
-      font-weight: var(--font-weight-medium);
+    .external-link:after {
+      content: "";
+      background-image: url("/external-link-light.svg");
+      background-position: 20%;
+      background-repeat: no-repeat;
+      background-size: 65%;
+      width: 1.1rem;
+      height: 1.1rem;
+      margin-right: -5px;
+      display: inline-block;
     }
 
-    .md\:font-semibold {
-      font-weight: var(--font-weight-semibold);
-    }
-
-    .md\:font-bold {
-      font-weight: var(--font-weight-bold);
-    }
-
-    .md\:font-extrabold {
-      font-weight: var(--font-weight-extrabold);
-    }
-
-    .md\:font-ultrabold {
-      font-weight: var(--font-weight-ultrabold);
-    }
-
-    .md\:leading-tight {
-      line-height: var(--line-height-tight);
-    }
-
-    .md\:leading-snug {
-      line-height: var(--line-height-snug);
-    }
-
-    .md\:leading-normal {
-      line-height: var(--line-height-normal);
-    }
-
-    .md\:leading-relaxed {
-      line-height: var(--line-height-relaxed);
+    .dark .external-link:after, [data-theme="dark"] .external-link:after {
+      background-image: url("/external-link-dark.svg");
     }
-
-    .md\:leading-loose {
-      line-height: var(--line-height-loose);
-    }
-
-    .md\:tracking-tight {
-      letter-spacing: var(--letter-spacing-tight);
-    }
-
-    .md\:tracking-normal {
-      letter-spacing: var(--letter-spacing-normal);
-    }
-
-    .md\:tracking-wide {
-      letter-spacing: var(--letter-spacing-wide);
-    }
-  }
-
-  .m-0 {
-    margin: var(--spacing-0);
-  }
-
-  .m-1 {
-    margin: var(--spacing-4);
-  }
-
-  .m-2 {
-    margin: var(--spacing-8);
-  }
-
-  .m-3 {
-    margin: var(--spacing-12);
-  }
-
-  .m-4 {
-    margin: var(--spacing-16);
-  }
-
-  .m-5 {
-    margin: var(--spacing-20);
-  }
-
-  .m-6 {
-    margin: var(--spacing-6);
-  }
-
-  .m-8 {
-    margin: var(--spacing-8);
-  }
-
-  .m-10 {
-    margin: var(--spacing-40);
-  }
-
-  .m-12 {
-    margin: var(--spacing-48);
-  }
-
-  .m-16 {
-    margin: var(--spacing-64);
-  }
-
-  .p-0 {
-    padding: var(--spacing-0);
-  }
-
-  .p-1 {
-    padding: var(--spacing-4);
-  }
-
-  .p-2 {
-    padding: var(--spacing-8);
-  }
-
-  .p-3 {
-    padding: var(--spacing-12);
-  }
-
-  .p-4 {
-    padding: var(--spacing-16);
-  }
-
-  .p-5 {
-    padding: var(--spacing-20);
-  }
-
-  .p-6 {
-    padding: var(--spacing-6);
-  }
-
-  .p-8 {
-    padding: var(--spacing-8);
-  }
-
-  .p-10 {
-    padding: var(--spacing-40);
-  }
-
-  .p-12 {
-    padding: var(--spacing-48);
-  }
-
-  .p-16 {
-    padding: var(--spacing-64);
-  }
-
-  .p-20 {
-    padding: var(--spacing-80);
-  }
-
-  .p-24 {
-    padding: var(--spacing-96);
-  }
-
-  .p-32 {
-    padding: var(--spacing-128);
-  }
-
-  @media (width >= 40rem) {
-    .sm\:m-0 {
-      margin: var(--spacing-0);
-    }
-
-    .sm\:m-1 {
-      margin: var(--spacing-4);
-    }
-
-    .sm\:m-2 {
-      margin: var(--spacing-8);
-    }
-
-    .sm\:m-3 {
-      margin: var(--spacing-12);
-    }
-
-    .sm\:m-4 {
-      margin: var(--spacing-16);
-    }
-
-    .sm\:m-5 {
-      margin: var(--spacing-20);
-    }
-
-    .sm\:m-6 {
-      margin: var(--spacing-6);
-    }
-
-    .sm\:m-8 {
-      margin: var(--spacing-8);
-    }
-
-    .sm\:m-10 {
-      margin: var(--spacing-40);
-    }
-
-    .sm\:m-12 {
-      margin: var(--spacing-48);
-    }
-
-    .sm\:m-16 {
-      margin: var(--spacing-64);
-    }
-
-    .sm\:p-0 {
-      padding: var(--spacing-0);
-    }
-
-    .sm\:p-1 {
-      padding: var(--spacing-4);
-    }
-
-    .sm\:p-2 {
-      padding: var(--spacing-8);
-    }
-
-    .sm\:p-3 {
-      padding: var(--spacing-12);
-    }
-
-    .sm\:p-4 {
-      padding: var(--spacing-16);
-    }
-
-    .sm\:p-5 {
-      padding: var(--spacing-20);
-    }
-
-    .sm\:p-6 {
-      padding: var(--spacing-6);
-    }
-
-    .sm\:p-8 {
-      padding: var(--spacing-8);
-    }
-
-    .sm\:p-10 {
-      padding: var(--spacing-40);
-    }
-
-    .sm\:p-12 {
-      padding: var(--spacing-48);
-    }
-
-    .sm\:p-16 {
-      padding: var(--spacing-64);
-    }
-
-    .sm\:p-20 {
-      padding: var(--spacing-80);
-    }
-
-    .sm\:p-24 {
-      padding: var(--spacing-96);
-    }
-
-    .sm\:p-32 {
-      padding: var(--spacing-128);
-    }
-  }
-
-  @media (width >= 48rem) {
-    .md\:m-0 {
-      margin: var(--spacing-0);
-    }
-
-    .md\:m-1 {
-      margin: var(--spacing-4);
-    }
-
-    .md\:m-2 {
-      margin: var(--spacing-8);
-    }
-
-    .md\:m-3 {
-      margin: var(--spacing-12);
-    }
-
-    .md\:m-4 {
-      margin: var(--spacing-16);
-    }
-
-    .md\:m-5 {
-      margin: var(--spacing-20);
-    }
-
-    .md\:m-6 {
-      margin: var(--spacing-6);
-    }
-
-    .md\:m-8 {
-      margin: var(--spacing-8);
-    }
-
-    .md\:m-10 {
-      margin: var(--spacing-40);
-    }
-
-    .md\:m-12 {
-      margin: var(--spacing-48);
-    }
-
-    .md\:m-16 {
-      margin: var(--spacing-64);
-    }
-
-    .md\:p-0 {
-      padding: var(--spacing-0);
-    }
-
-    .md\:p-1 {
-      padding: var(--spacing-4);
-    }
-
-    .md\:p-2 {
-      padding: var(--spacing-8);
-    }
-
-    .md\:p-3 {
-      padding: var(--spacing-12);
-    }
-
-    .md\:p-4 {
-      padding: var(--spacing-16);
-    }
-
-    .md\:p-5 {
-      padding: var(--spacing-20);
-    }
-
-    .md\:p-6 {
-      padding: var(--spacing-6);
-    }
-
-    .md\:p-8 {
-      padding: var(--spacing-8);
-    }
-
-    .md\:p-10 {
-      padding: var(--spacing-40);
-    }
-
-    .md\:p-12 {
-      padding: var(--spacing-48);
-    }
-
-    .md\:p-16 {
-      padding: var(--spacing-64);
-    }
-
-    .md\:p-20 {
-      padding: var(--spacing-80);
-    }
-
-    .md\:p-24 {
-      padding: var(--spacing-96);
-    }
-
-    .md\:p-32 {
-      padding: var(--spacing-128);
-    }
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .flex-row {
-    flex-direction: var(--flex-row);
-  }
-
-  .flex-column {
-    flex-direction: var(--flex-column);
-  }
-
-  .flex-wrap {
-    flex-wrap: var(--flex-wrap);
-  }
-
-  .flex-nowrap {
-    flex-wrap: var(--flex-nowrap);
-  }
-
-  .items-center {
-    align-items: var(--flex-center);
-  }
-
-  .justify-center {
-    justify-content: var(--flex-center);
-  }
-
-  @media (width >= 40rem) {
-    .sm\:flex {
-      display: flex;
-    }
-
-    .sm\:flex-row {
-      flex-direction: var(--flex-row);
-    }
-
-    .sm\:flex-column {
-      flex-direction: var(--flex-column);
-    }
-
-    .sm\:flex-wrap {
-      flex-wrap: var(--flex-wrap);
-    }
-
-    .sm\:flex-nowrap {
-      flex-wrap: var(--flex-nowrap);
-    }
-
-    .sm\:items-center {
-      align-items: var(--flex-center);
-    }
-
-    .sm\:justify-center {
-      justify-content: var(--flex-center);
-    }
-  }
-
-  @media (width >= 48rem) {
-    .md\:flex {
-      display: flex;
-    }
-
-    .md\:flex-row {
-      flex-direction: var(--flex-row);
-    }
-
-    .md\:flex-column {
-      flex-direction: var(--flex-column);
-    }
-
-    .md\:flex-wrap {
-      flex-wrap: var(--flex-wrap);
-    }
-
-    .md\:flex-nowrap {
-      flex-wrap: var(--flex-nowrap);
-    }
-
-    .md\:items-center {
-      align-items: var(--flex-center);
-    }
-
-    .md\:justify-center {
-      justify-content: var(--flex-center);
-    }
-  }
-
-  .grid {
-    display: grid;
-  }
-
-  .grid-cols-2 {
-    grid-template-columns: repeat(var(--grid-columns-2), minmax(0, 1fr));
-  }
-
-  .grid-cols-3 {
-    grid-template-columns: repeat(var(--grid-columns-3), minmax(0, 1fr));
-  }
-
-  .grid-cols-4 {
-    grid-template-columns: repeat(var(--grid-columns-4), minmax(0, 1fr));
-  }
-
-  .grid-cols-5 {
-    grid-template-columns: repeat(var(--grid-columns-5), minmax(0, 1fr));
-  }
-
-  .grid-cols-6 {
-    grid-template-columns: repeat(var(--grid-columns-6), minmax(0, 1fr));
-  }
-
-  .grid-cols-7 {
-    grid-template-columns: repeat(var(--grid-columns-7), minmax(0, 1fr));
-  }
-
-  .grid-cols-8 {
-    grid-template-columns: repeat(var(--grid-columns-8), minmax(0, 1fr));
-  }
-
-  .grid-cols-9 {
-    grid-template-columns: repeat(var(--grid-columns-9), minmax(0, 1fr));
-  }
-
-  .grid-cols-10 {
-    grid-template-columns: repeat(var(--grid-columns-10), minmax(0, 1fr));
-  }
-
-  .grid-cols-11 {
-    grid-template-columns: repeat(var(--grid-columns-11), minmax(0, 1fr));
-  }
-
-  .grid-cols-12 {
-    grid-template-columns: repeat(var(--grid-columns-12), minmax(0, 1fr));
-  }
-
-  .gap-0 {
-    gap: var(--gap-0);
-  }
-
-  .gap-1 {
-    gap: var(--gap-1);
-  }
-
-  .gap-2 {
-    gap: var(--gap-2);
-  }
-
-  .gap-3 {
-    gap: var(--gap-3);
-  }
-
-  .gap-4 {
-    gap: var(--gap-4);
-  }
-
-  .gap-5 {
-    gap: var(--gap-5);
-  }
-
-  .gap-6 {
-    gap: var(--gap-6);
-  }
-
-  .gap-8 {
-    gap: var(--gap-8);
-  }
-
-  .gap-10 {
-    gap: var(--gap-10);
-  }
-
-  .gap-12 {
-    gap: var(--gap-12);
-  }
-
-  .gap-16 {
-    gap: var(--gap-16);
-  }
-
-  .gap-20 {
-    gap: var(--gap-20);
-  }
-
-  .gap-24 {
-    gap: var(--gap-24);
-  }
-
-  .gap-32 {
-    gap: var(--gap-32);
-  }
-
-  @media (width >= 40rem) {
-    .sm\:grid {
-      display: grid;
-    }
-
-    .sm\:grid-cols-12 {
-      grid-template-columns: repeat(var(--grid-columns), 1fr);
-    }
-
-    .sm\:gap-0 {
-      gap: .5rem;
-      gap: var(--gap-0);
-    }
-
-    .sm\:gap-1 {
-      gap: var(--gap-1);
-    }
-
-    .sm\:gap-2 {
-      gap: var(--gap-2);
-    }
-
-    .sm\:gap-3 {
-      gap: var(--gap-3);
-    }
-
-    .sm\:gap-4 {
-      gap: var(--gap-4);
-    }
-
-    .sm\:gap-5 {
-      gap: var(--gap-5);
-    }
-
-    .sm\:gap-6 {
-      gap: var(--gap-6);
-    }
-
-    .sm\:gap-8 {
-      gap: var(--gap-8);
-    }
-
-    .sm\:gap-10 {
-      gap: var(--gap-10);
-    }
-
-    .sm\:gap-12 {
-      gap: var(--gap-12);
-    }
-
-    .sm\:gap-16 {
-      gap: var(--gap-16);
-    }
-
-    .sm\:gap-20 {
-      gap: var(--gap-20);
-    }
-
-    .sm\:gap-24 {
-      gap: var(--gap-24);
-    }
-
-    .sm\:gap-32 {
-      gap: var(--gap-32);
-    }
-  }
-
-  @media (width >= 48rem) {
-    .md\:grid {
-      display: grid;
-    }
-
-    .md\:grid-cols-12 {
-      grid-template-columns: repeat(var(--grid-columns), 1fr);
-    }
-
-    .md\:gap-0 {
-      gap: .5rem;
-      gap: var(--gap-0);
-    }
-
-    .md\:gap-1 {
-      gap: var(--gap-1);
-    }
-
-    .md\:gap-2 {
-      gap: var(--gap-2);
-    }
-
-    .md\:gap-3 {
-      gap: var(--gap-3);
-    }
-
-    .md\:gap-4 {
-      gap: var(--gap-4);
-    }
-
-    .md\:gap-5 {
-      gap: var(--gap-5);
-    }
-
-    .md\:gap-6 {
-      gap: var(--gap-6);
-    }
-
-    .md\:gap-8 {
-      gap: var(--gap-8);
-    }
-
-    .md\:gap-10 {
-      gap: var(--gap-10);
-    }
-
-    .md\:gap-12 {
-      gap: var(--gap-12);
-    }
-
-    .md\:gap-16 {
-      gap: var(--gap-16);
-    }
-
-    .md\:gap-20 {
-      gap: var(--gap-20);
-    }
-
-    .md\:gap-24 {
-      gap: var(--gap-24);
-    }
-
-    .md\:gap-32 {
-      gap: var(--gap-32);
-    }
-  }
-
-  .border {
-    border-width: var(--border-width-normal);
-    border-style: var(--border-style-solid);
-    border-color: var(--border-color);
-  }
-
-  .border-thin {
-    border-width: var(--border-width-thin);
-    border-style: var(--border-style-solid);
-    border-color: var(--border-color);
-  }
-
-  .border-thick {
-    border-width: var(--border-width-thick);
-    border-style: var(--border-style-solid);
-    border-color: var(--border-color);
-  }
-
-  .rounded-none {
-    border-radius: var(--border-radius-none);
-  }
-
-  .rounded-sm {
-    border-radius: var(--border-radius-sm);
-  }
-
-  .rounded, .rounded-md {
-    border-radius: var(--border-radius-md);
-  }
-
-  .rounded-lg {
-    border-radius: var(--border-radius-lg);
-  }
-
-  .rounded-xl {
-    border-radius: var(--border-radius-xl);
-  }
-
-  .rounded-2xl {
-    border-radius: var(--border-radius-2xl);
-  }
-
-  .rounded-full {
-    border-radius: var(--border-radius-full);
-  }
-
-  @media (width >= 40rem) {
-    .sm\:border {
-      border-width: var(--border-width-normal);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .sm\:border-thin {
-      border-width: var(--border-width-thin);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .sm\:border-thick {
-      border-width: var(--border-width-thick);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .sm\:rounded-none {
-      border-radius: var(--border-radius-none);
-    }
-
-    .sm\:rounded-sm, .sm\:rounded, .sm\:rounded-md {
-      border-radius: var(--border-radius-sm);
-    }
-
-    .sm\:rounded-lg {
-      border-radius: var(--border-radius-lg);
-    }
-
-    .sm\:rounded-xl {
-      border-radius: var(--border-radius-xl);
-    }
-
-    .sm\:rounded-2xl {
-      border-radius: var(--border-radius-2xl);
-    }
-
-    .sm\:rounded-full {
-      border-radius: var(--border-radius-full);
-    }
-  }
-
-  @media (width >= 48rem) {
-    .md\:border {
-      border-width: var(--border-width-normal);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .md\:border-thin {
-      border-width: var(--border-width-thin);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .md\:border-thick {
-      border-width: var(--border-width-thick);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .md\:rounded-none {
-      border-radius: var(--border-radius-none);
-    }
-
-    .md\:rounded-sm {
-      border-radius: var(--border-radius-sm);
-    }
-
-    .md\:rounded, .md\:rounded-md {
-      border-radius: var(--border-radius-md);
-    }
-
-    .md\:rounded-lg {
-      border-radius: var(--border-radius-lg);
-    }
-
-    .md\:rounded-xl {
-      border-radius: var(--border-radius-xl);
-    }
-
-    .md\:rounded-2xl {
-      border-radius: var(--border-radius-2xl);
-    }
-
-    .md\:rounded-full {
-      border-radius: var(--border-radius-full);
-    }
-  }
-
-  .shadow {
-    box-shadow: var(--shadow);
-  }
-
-  .shadow-xs {
-    box-shadow: var(--shadow-xs);
-  }
-
-  .shadow-sm {
-    box-shadow: var(--shadow-sm);
-  }
-
-  .shadow-md {
-    box-shadow: var(--shadow-md);
-  }
-
-  .shadow-lg {
-    box-shadow: var(--shadow-lg);
-  }
-
-  .shadow-xl {
-    box-shadow: var(--shadow-xl);
-  }
-
-  @media (width >= 48rem) {
-    .md\:shadow {
-      box-shadow: var(--shadow);
-    }
-
-    .md\:shadow-xs {
-      box-shadow: var(--shadow-xs);
-    }
-
-    .md\:shadow-sm {
-      box-shadow: var(--shadow-sm);
-    }
-
-    .md\:shadow-md {
-      box-shadow: var(--shadow-md);
-    }
-
-    .md\:shadow-lg {
-      box-shadow: var(--shadow-lg);
-    }
-
-    .md\:shadow-xl {
-      box-shadow: var(--shadow-xl);
-    }
-  }
-
-  .opacity-0 {
-    opacity: var(--opacity-0);
-  }
-
-  .opacity-25 {
-    opacity: var(--opacity-25);
-  }
-
-  .opacity-50 {
-    opacity: var(--opacity-50);
-  }
-
-  .opacity-75 {
-    opacity: var(--opacity-75);
-  }
-
-  .opacity-100 {
-    opacity: var(--opacity-100);
-  }
-
-  @media (width >= 48rem) {
-    .md\:opacity-0 {
-      opacity: var(--opacity-0);
-    }
-
-    .md\:opacity-25 {
-      opacity: var(--opacity-25);
-    }
-
-    .md\:opacity-50 {
-      opacity: var(--opacity-50);
-    }
-
-    .md\:opacity-75 {
-      opacity: var(--opacity-75);
-    }
-
-    .md\:opacity-100 {
-      opacity: var(--opacity-100);
-    }
-  }
-
-  .transition-fast {
-    transition: var(--transition-fast);
-  }
-
-  .transition-normal {
-    transition: var(--transition-normal);
-  }
-
-  .transition-slow {
-    transition: var(--transition-slow);
-  }
-
-  .ring-primary-offset-primary:focus:not(.dark *), .ring-primary-offset-primary:active:not(.dark *) {
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--primary-700);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--primary-400);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .ring-secondary-offset-secondary:focus:not(.dark *), .ring-secondary-offset-secondary:active:not(.dark *) {
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--secondary-700);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--secondary-400);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .ring-accent-offset-accent:focus:not(.dark *), .ring-accent-offset-accent:active:not(.dark *) {
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--accent-700);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--accent-400);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .fix-scroll-layout-shift-right {
-    padding-right: var(--removed-body-scroll-bar-size);
-  }
-
-  .fix-scroll-layout-shift-left {
-    padding-left: var(--removed-body-scroll-bar-size);
-  }
-}
-
-@layer byline-theme {
-  input:autofill, input:autofill:hover, input:autofill:focus, textarea:autofill, textarea:autofill:hover, textarea:autofill:focus, select:autofill, select:autofill:hover, select:autofill:focus {
-    -webkit-text-fill-color: black;
-    color: #000;
-    background-color: #fad9a7;
-    border: 1px solid #d89d3d;
-    transition: background-color 5000s ease-in-out;
-    -webkit-box-shadow: inset 0 0 0 1000px #fff2dc;
-    box-shadow: inset 0 0 0 1000px #fff2dc;
-  }
-
-  .dark input:autofill, .dark input:autofill:hover, .dark input:autofill:focus, .dark textarea:autofill, .dark textarea:autofill:hover, .dark textarea:autofill:focus, .dark select:autofill, .dark select:autofill:hover, .dark select:autofill:focus, [data-theme="dark"] input:autofill, [data-theme="dark"] input:autofill:hover, [data-theme="dark"] input:autofill:focus, [data-theme="dark"] textarea:autofill, [data-theme="dark"] textarea:autofill:hover, [data-theme="dark"] textarea:autofill:focus, [data-theme="dark"] select:autofill, [data-theme="dark"] select:autofill:hover, [data-theme="dark"] select:autofill:focus {
-    border: 1px solid var(--theme-600);
-    -webkit-text-fill-color: white;
-    -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
-    box-shadow: 0 0 0px 1000px var(--theme-600) inset;
-    color: #fff;
-    background-color: #64646480;
-    transition: background-color 5000s ease-in-out;
-  }
-
-  :root {
-    --scroll-bar-thumb: var(--theme-400);
-    --scroll-bar-track: var(--theme-600);
-  }
-
-  :root.dark, :root[data-theme="dark"] {
-    --scroll-bar-thumb: var(--canvas-700);
-    --scroll-bar-track: var(--canvas-900);
-  }
-
-  ::-webkit-scrollbar {
-    width: .6em;
-    height: .6em;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--scroll-bar-thumb);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--scroll-bar-track);
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: var(--scroll-bar-track);
-  }
-
-  html {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
-  }
-
-  .component--scroller, .dark .component--scroller, [data-theme="dark"] .component--scroller {
-    --scroll-bar-thumb: var(--scroll-bar-thumb);
-    --scroll-bar-track: var(--scroll-bar-track);
-  }
-
-  .component--scroller {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
-    overflow-y: auto;
-  }
-
-  html {
-    color: var(--text);
-    font-size: 1rem;
-  }
-
-  html .not-dark {
-    color: var(--text);
-  }
-
-  ::selection {
-    background-color: var(--theme-600);
-    color: #fff;
-  }
-
-  .dark ::selection, [data-theme="dark"] ::selection {
-    background-color: var(--theme-200);
-    color: var(--gray-900);
-  }
-
-  h1 {
-    font-size: 1.75rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
-
-  h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
-
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.1;
-  }
-
-  h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.1;
-  }
-
-  .external-link:after {
-    content: "";
-    background-image: url("/external-link-light.svg");
-    background-position: 20%;
-    background-repeat: no-repeat;
-    background-size: 65%;
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: -5px;
-    display: inline-block;
-  }
-
-  .dark .external-link:after, [data-theme="dark"] .external-link:after {
-    background-image: url("/external-link-dark.svg");
-  }
-}
+  }
+}
 
 @layer byline-typography;
 
-@layer byline-components {
-  .component--hamburger {
-    z-index: 200;
-    cursor: pointer;
-    width: 42px;
-    height: 34px;
-    font: inherit;
-    color: inherit;
-    text-transform: none;
-    background-color: #0000;
-    border: 0;
-    border-radius: 4px;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    transition-property: opacity, filter;
-    transition-duration: .15s;
-    transition-timing-function: ease;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .component--hamburger:active, .component--hamburger:focus {
-    border: .5px dashed #fff;
-    border-radius: 4px;
-    outline: none;
-  }
-
-  .component--hamburger .box {
-    width: 24px;
-    height: 24px;
-    display: block;
-    position: relative;
-  }
-
-  .component--hamburger .inner {
-    margin-top: -1px;
-    transition-duration: 75ms;
-    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
-    display: block;
-    top: 50%;
-  }
-
-  .component--hamburger .inner, .component--hamburger .inner:before, .component--hamburger .inner:after {
-    border-radius: 0;
-    width: 24px;
-    height: 2px;
-    transition-property: transform;
-    transition-duration: .15s;
-    transition-timing-function: ease;
-    position: absolute;
-  }
-
-  .component--hamburger .inner:before, .component--hamburger .inner:after {
-    content: "";
-    display: block;
-  }
-
-  .component--hamburger .inner:before {
-    transition: top 75ms .12s, opacity 75ms;
-    top: -8px;
-  }
-
-  .component--hamburger .inner:after {
-    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
-    bottom: -8px;
-  }
-
-  .component--hamburger.is_active .inner {
-    transition-delay: .12s;
-    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
-    transform: rotate(45deg);
-  }
-
-  .component--hamburger.is_active .inner:before {
-    opacity: 0;
-    transition: top 75ms, opacity 75ms .12s;
-    top: 0;
-  }
-
-  .component--hamburger.is_active .inner:after {
-    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
-    bottom: 0;
-    transform: rotate(-90deg);
-  }
-}
-
 .component--fade-in-lift {
   opacity: 0;
   visibility: hidden;