nimiq-branding-cli 1.0.0

package/assets/css/modern/utilities.css

@@ -0,0 +1,861 @@
+.nq-subline {
+  font-size: 1.375rem;
+  line-height: 1.2;
+  margin-bottom: 2.75rem;
+  color: var(--colors-neutral-800);
+
+  @media (min-width: 769px) {
+    font-size: 1.5rem;
+  }
+}
+
+.nq-label {
+  text-transform: uppercase;
+  letter-spacing: 0.17em;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--colors-neutral-800);
+
+  :where([data-inverted] *) & {
+    color: color-mix(in oklch, var(--colors-neutral-0) 80%, transparent);
+  }
+
+  :where(.dark, [data-theme='dark']) & {
+    color: color-mix(in oklch, var(--colors-white) 70%, transparent);
+  }
+}
+
+.nq-arrow {
+  /* We select the arrow OR the closest parent with href to an http */
+  a[href^='http'] &::after,
+  &[href^='http']::after {
+    margin-bottom: 1px;
+    rotate: 0.375turn;
+  }
+
+  &::after {
+    content: '';
+    position: relative;
+    display: inline-block;
+    -webkit-mask: var(--nq-icon) no-repeat;
+    mask: var(--nq-icon) no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    background-color: currentColor;
+    color: inherit;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: inherit;
+    margin-left: 0.4em;
+    transition: transform 100ms ease-out;
+    width: 0.7em;
+    height: 0.7em;
+    --nq-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQuNjY2IDEwIDEgNmwzLjY2Ny00TTIuNjE5IDZIMTEiLz48L3N2Zz4=');
+  }
+
+  /* We select the arrow OR the closest parent with href starting with local href */
+  a:where(:not([href^='http'])) &::after,
+  &:where(:not([href^='http']))::after {
+    margin-bottom: 1px;
+    rotate: 0.5turn;
+  }
+
+  &:hover::after {
+    transform: translateX(-0.25em);
+  }
+
+  a:hover &::after {
+    transform: translateX(-0.25em);
+  }
+}
+
+.nq-arrow-back {
+  &::before {
+    content: '';
+    position: relative;
+    display: inline-block;
+    -webkit-mask: var(--nq-icon) no-repeat;
+    mask: var(--nq-icon) no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    background-color: currentColor;
+    color: inherit;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: inherit;
+    transition: transform 100ms ease-out;
+    width: 0.7em;
+    height: 0.7em;
+    --nq-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQuNjY2IDEwIDEgNmwzLjY2Ny00TTIuNjE5IDZIMTEiLz48L3N2Zz4=');
+    margin-right: 0.4em;
+    margin-bottom: 1px;
+  }
+
+  &:hover::before {
+    transform: translateX(-0.25em);
+  }
+
+  a:hover &::before {
+    transform: translateX(-0.25em);
+  }
+}
+
+@property --nq-gradient-from {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --nq-gradient-to {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --nq-gradient-stops {
+  syntax: '*';
+  inherits: false;
+}
+
+.nq-pill,
+.nq-pill-lg,
+.nq-pill-xl,
+.nq-pill-blue,
+.nq-pill-white,
+.nq-pill-gold,
+.nq-pill-green,
+.nq-pill-orange,
+.nq-pill-red,
+.nq-pill-secondary,
+.nq-pill-tertiary {
+  position: relative;
+  font-weight: bold;
+  font-size: 0.875rem;
+  padding: 0.1875rem 0.8125rem;
+  border: none;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  line-height: 1.5;
+  height: max-content;
+  width: max-content;
+  text-decoration: none;
+  color: white;
+  outline: none;
+  background-image: radial-gradient(at 100% 100% in oklab, var(--nq-gradient-from) 0%, var(--nq-gradient-to) 100%);
+  --transitions: --nq-gradient-from 200ms var(--nq-ease), --nq-gradient-to 200ms var(--nq-ease);
+  transition: var(--transitions);
+
+  &:where(.nq-pill-lg, [nq-pill-lg]) {
+    font-size: 1rem;
+    padding: 0.3125rem 1rem;
+  }
+
+  &:where(.nq-pill-xl, [nq-pill-xl]) {
+    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    transition:
+      transform 450ms var(--nq-ease),
+      box-shadow 450ms var(--nq-ease),
+      background-color 250ms var(--nq-ease),
+      var(--transitions);
+    will-change: box-shadow;
+    text-transform: uppercase;
+    letter-spacing: 0.094em;
+    min-width: 12.5rem;
+    flex: 1;
+    padding: 1.25rem 2rem;
+    line-height: 1.25rem;
+    font-size: 1rem;
+    gap: 0.5rem;
+    border-radius: 9999px;
+    margin: 1rem;
+
+    &:where(:hover, :focus) {
+      box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.2);
+      transform: translate3D(0, -2px, 0);
+    }
+
+    &:active {
+      outline: none;
+      box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.2);
+      transform: translate3D(0, 1px, 0);
+      transition:
+        transform 200ms cubic-bezier(0.41, 0.34, 0.26, 1.55),
+        box-shadow 200ms cubic-bezier(0.41, 0.34, 0.26, 1.55),
+        background-color 200ms var(--nq-ease),
+        var(--transitions);
+    }
+  }
+
+  &:where([disabled]) {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:not([disabled]):where(:hover, :active, :focus)::before {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--colors-blue);
+    outline-offset: 3px;
+  }
+}
+
+.nq-pill-blue {
+  --nq-gradient-from: var(--colors-blue-gradient-from);
+  --nq-gradient-to: var(--colors-blue-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-blue-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-blue-gradient-darkened-to);
+  }
+}
+
+.nq-pill-white {
+  background: var(--colors-white);
+  background-image: none;
+  color: var(--colors-blue);
+  --transitions: background 200ms var(--nq-ease);
+
+  &:hover,
+  &:focus-visible {
+    background: #fafafa;
+  }
+}
+
+.nq-pill-green {
+  --nq-gradient-from: var(--colors-green-gradient-from);
+  --nq-gradient-to: var(--colors-green-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-green-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-green-gradient-darkened-to);
+  }
+}
+
+.nq-pill-red {
+  --nq-gradient-from: var(--colors-red-gradient-from);
+  --nq-gradient-to: var(--colors-red-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-red-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-red-gradient-darkened-to);
+  }
+}
+
+.nq-pill-gold {
+  --nq-gradient-from: var(--colors-gold-gradient-from);
+  --nq-gradient-to: var(--colors-gold-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-gold-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-gold-gradient-darkened-to);
+  }
+}
+
+.nq-pill-orange {
+  --nq-gradient-from: var(--colors-orange-gradient-from);
+  --nq-gradient-to: var(--colors-orange-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-orange-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-orange-gradient-darkened-to);
+  }
+}
+
+.nq-pill-secondary {
+  background: var(--colors-neutral-400);
+  color: var(--colors-neutral);
+  transition: background 200ms ease-in-out;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--colors-neutral-500);
+  }
+
+  :where(
+      .dark,
+      [data-theme='dark'],
+      :where(.bg-darkblue &, &:where(.bg-darkblue, [bg-darkblue])),
+      :where(.bg-neutral &, &:where(.bg-neutral, [bg-neutral])),
+      :where(.bg-darkerblue &, &:where(.bg-darkerblue, [bg-darkerblue]))
+    )
+    & {
+    background: color-mix(in oklch, var(--colors-white) 10%, transparent);
+
+    &:hover,
+    &:focus-visible {
+      background: color-mix(in oklch, var(--colors-white) 20%, transparent);
+    }
+  }
+}
+
+.nq-pill-tertiary {
+  outline: 0 0 0 1.5px var(--colors-neutral-500);
+  color: var(--colors-neutral);
+  background: var(--colors-neutral-0);
+
+  &:hover {
+    background: var(--colors-neutral-50);
+    outline-color: var(--colors-neutral-600);
+
+    .dark & {
+      background: var(--colors-neutral-200);
+    }
+  }
+}
+
+.nq-ghost-btn {
+  margin-right: 1px;
+  margin-bottom: 1px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 600;
+  color: var(--colors-neutral-700);
+  background: inherit;
+  transition: 100ms background var(--nq-ease, ease-out);
+  outline: 1.5px var(--colors-neutral-400);
+  height: max-content;
+  width: max-content;
+
+  :where(.dark, [data-theme='dark']) &,
+  :where([data-inverted] *) & {
+    color: color-mix(in oklch, var(--colors-neutral-0) 80%, transparent);
+  }
+
+  &:hover {
+    background: var(--colors-neutral-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--colors-blue);
+    outline-offset: 3px;
+  }
+}
+
+.nq-close-btn {
+  width: 1em;
+  height: 1em;
+  background-color: var(--colors-neutral-500);
+  border-radius: 1em;
+  transition: 100ms background var(--nq-ease, ease-out);
+  position: relative;
+
+  &::after {
+    content: '';
+    --cross-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTEgMSAxMCAxMG0wLTEwTDEgMTEiLz48L3N2Zz4=');
+    -webkit-mask: var(--cross-icon) no-repeat;
+    mask: var(--cross-icon) no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    background-color: currentColor;
+    color: var(--colors-neutral-0);
+    width: 0.42em;
+    height: 0.42em;
+    margin: auto;
+    display: block;
+    position: absolute;
+    inset: 0;
+    right: -1px;
+  }
+
+  &:where(:hover, :focus) {
+    background-color: var(--colors-neutral-600);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--colors-blue);
+    outline-offset: 3px;
+  }
+}
+
+.nq-switch {
+  &:where(input[type='checkbox']) {
+    --active-color: var(--colors-neutral-300);
+    appearance: none;
+    font-size: 1em;
+    width: 2em;
+    height: max-content;
+    aspect-ratio: 1.625;
+    border-radius: 2em;
+    background: var(--active-color);
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 0.6em;
+      width: 0.9em;
+      height: 0.9em;
+      border: 1px solid color-mix(in oklch, var(--colors-neutral) 2%, transparent);
+      border-radius: 50%;
+      background: #ffffff;
+      transition: left 100ms ease-out;
+      box-shadow: var(--nq-shadow);
+    }
+
+    &:checked {
+      --active-color: var(--colors-blue);
+
+      &::before {
+        left: 1.4em;
+      }
+    }
+
+    @media (prefers-reduced-motion) {
+      transition-duration: 0s;
+
+      &::before {
+        transition-duration: 0s;
+      }
+    }
+
+    &[disabled] {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.nq-curtain-y {
+  overflow: auto;
+  position: sticky;
+  /* You need to set top-0 or bottom-0! */
+  --mask-size: 2rem;
+  transition: mask-size 0.25s
+    linear(
+      0 0%,
+      0.0027 3.64%,
+      0.0106 7.29%,
+      0.0425 14.58%,
+      0.0957 21.87%,
+      0.1701 29.16%,
+      0.2477 35.19%,
+      0.3401 41.23%,
+      0.5982 55.18%,
+      0.7044 61.56%,
+      0.7987 68.28%,
+      0.875 75%,
+      0.9297 81.25%,
+      0.9687 87.5%,
+      0.9922 93.75%,
+      1 100%
+    );
+  scroll-timeline: --scroller;
+  --curtain-color: var(--colors-neutral);
+  mask:
+    linear-gradient(var(--curtain-color), transparent) 0 0 / 100% 0 no-repeat,
+    linear-gradient(var(--curtain-color), var(--curtain-color)) 0 50% / 100% 100% no-repeat,
+    linear-gradient(transparent, var(--curtain-color)) 0 100% / 100% var(--mask-size) no-repeat;
+  mask-composite: exclude;
+  mask-repeat: none;
+  animation:
+    mask-up both linear,
+    mask-down both linear;
+  animation-timeline: scroll(self);
+  animation-range:
+    0 2rem,
+    2rem 100%;
+}
+
+@keyframes mask-up {
+  100% {
+    mask-size:
+      100% var(--mask-size),
+      100% 100%,
+      100% var(--mask-size);
+  }
+}
+
+@keyframes mask-down {
+  100% {
+    mask-size:
+      100% var(--mask-size),
+      100% 100%,
+      100% 0;
+  }
+}
+
+.nq-card-lg {
+  max-width: 37.5rem;
+  background: var(--colors-neutral-0);
+  color: var(--colors-neutral);
+  border-radius: 0.625rem;
+  box-shadow: var(--nq-shadow);
+  outline: 1.5px solid color-mix(in oklch, var(--colors-neutral) 6%, transparent);
+  outline-offset: -1.5px;
+  margin: 1rem 0.5rem;
+
+  @media screen and (min-width: 450px) {
+    margin: 1rem;
+  }
+
+  header {
+    padding: 1.5rem;
+    text-align: center;
+
+    @media screen and (min-width: 450px) {
+      padding: 2rem;
+    }
+
+    h1,
+    h2 {
+      margin: 0;
+    }
+
+    .nq-notice {
+      margin: 1.5rem 0 0;
+    }
+  }
+
+  section {
+    padding: 1.5rem;
+
+    @media screen and (min-width: 450px) {
+      padding: 2rem;
+    }
+
+    header + & {
+      padding-top: 0.5rem;
+    }
+
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  footer {
+    padding: 0.5rem;
+
+    section + & {
+      padding-top: 0;
+    }
+  }
+}
+
+.nq-input-box {
+  font-size: 1em;
+  line-height: 1.5;
+  padding: 0.28125em 0.875em;
+  height: max-content;
+  min-width: min(8em, 220px);
+
+  border-radius: 0.125em;
+  width: 100%;
+  background-color: transparent;
+  transition:
+    colors 0.2s var(--nq-ease),
+    box-shadow 0.1s var(--nq-ease);
+
+  --color: var(--colors-neutral);
+  --placeholder-color: var(--colors-neutral-700);
+  --outline-color: var(--colors-neutral-500);
+
+  outline: 1.5px solid var(--outline-color);
+  color: var(--color);
+
+  :where([data-inverted] *) & {
+    --placeholder-color: color-mix(in oklch, var(--colors-neutral-0) 80%, transparent);
+  }
+
+  &::placeholder {
+    color: var(--placeholder-color);
+  }
+
+  &:not(.nq-invalid, :user-invalid):where(:hover, :focus, :focus-within) {
+    --color: var(--colors-blue);
+    --outline-color: color-mix(in oklch, var(--colors-blue) 30%, transparent);
+
+    &::placeholder {
+      --placeholder-color: color-mix(in oklch, var(--colors-blue) 60%, transparent);
+    }
+
+    &:focus:valid,
+    &:focus-within:valid {
+      --outline-color: var(--colors-blue);
+    }
+  }
+
+  &:where(.nq-invalid, :user-invalid) {
+    --color: var(--colors-orange);
+    outline-color: color-mix(in oklch, var(--colors-orange) 40%, transparent);
+
+    &::placeholder {
+      --placeholder-color: color-mix(in oklch, var(--colors-orange) 70%, transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+      outline-color: var(--colors-orange);
+    }
+  }
+
+  &:where(textarea, :has(textarea)) {
+    --padding: 0.25em;
+    min-height: calc(3lh + 2 * var(--padding));
+    max-height: calc(5lh + 2 * var(--padding));
+    field-sizing: content;
+    padding: var(--padding) calc(var(--padding) + ((1lh - 1ex) / 2));
+  }
+}
+
+.nq-focusable {
+  outline-color: var(--colors-blue);
+
+  &:focus-visible {
+    outline: 2px solid;
+    outline-offset: 3px;
+  }
+}
+
+.nq-card {
+  & {
+    background-color: var(--colors-neutral-50);
+    color: var(--colors-neutral);
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    outline: 1.5px solid color-mix(in oklch, var(--colors-neutral) 4%, transparent);
+    outline-offset: -1.5px;
+    padding: 1.5rem;
+  }
+}
+
+.nq-hoverable,
+.nq-hoverable-blue,
+.nq-hoverable-green,
+.nq-hoverable-orange,
+.nq-hoverable-red,
+.nq-hoverable-gold {
+  --nq-gradient-from: var(--colors-neutral-300);
+  --nq-gradient-to: color-mix(in oklch, var(--colors-neutral-300) 65%, transparent);
+  background-image: radial-gradient(at 100% 100% in oklab, var(--nq-gradient-from) 0%, var(--nq-gradient-to) 100%);
+  color: var(--colors-neutral);
+  border-radius: 0.5rem;
+  outline: 1.5px solid color-mix(in oklch, var(--colors-neutral) 4%, transparent);
+  outline-offset: -1.5px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition:
+    --nq-gradient-from 300ms var(--nq-ease),
+    --nq-gradient-to 300ms var(--nq-ease),
+    transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    color 200ms ease-out,
+    outline-color 200ms ease-out;
+
+  @media (hover: hover) {
+    &:where(:hover, :focus-visible) {
+      --nq-gradient-from: var(--colors-white);
+      --nq-gradient-to: var(--colors-white);
+      color: var(--hoverable-text, var(--colors-darkblue));
+      box-shadow: var(--nq-shadow);
+      outline-color: color-mix(in oklch, var(--colors-neutral) 2%, transparent);
+      transform: translateY(-0.375rem);
+    }
+
+    > * {
+      z-index: 1;
+    }
+  }
+}
+
+.nq-hoverable-blue {
+  --nq-gradient-from: var(--colors-blue-gradient-from);
+  --nq-gradient-to: var(--colors-blue-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-blue-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-blue-gradient-darkened-to);
+    --hoverable-text: var(--colors-white);
+  }
+}
+
+.nq-hoverable-green {
+  --nq-gradient-from: var(--colors-green-gradient-from);
+  --nq-gradient-to: var(--colors-green-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-green-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-green-gradient-darkened-to);
+    --hoverable-text: var(--colors-white);
+  }
+}
+
+.nq-hoverable-orange {
+  --nq-gradient-from: var(--colors-orange-gradient-from);
+  --nq-gradient-to: var(--colors-orange-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-orange-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-orange-gradient-darkened-to);
+    --hoverable-text: var(--colors-white);
+  }
+}
+
+.nq-hoverable-red {
+  --nq-gradient-from: var(--colors-red-gradient-from);
+  --nq-gradient-to: var(--colors-red-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-red-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-red-gradient-darkened-to);
+    --hoverable-text: var(--colors-white);
+  }
+}
+
+.nq-hoverable-gold {
+  --nq-gradient-from: var(--colors-gold-gradient-from);
+  --nq-gradient-to: var(--colors-gold-gradient-to);
+
+  &:hover,
+  &:focus-visible {
+    --nq-gradient-from: var(--colors-gold-gradient-darkened-from);
+    --nq-gradient-to: var(--colors-gold-gradient-darkened-to);
+    --hoverable-text: var(--colors-white);
+  }
+}
+
+.nq-hoverable-cta {
+  transform-style: preserve-3d;
+  position: relative;
+
+  &::after {
+    width: 100%;
+    content: var(--nq-content, 'Learn more');
+    --font-size-min: 0.75;
+    --font-size-max: 1;
+    font-size: var(--font-size);
+    white-space: nowrap;
+    background-color: transparent;
+    font-weight: bold;
+    text-transform: none;
+    letter-spacing: normal;
+    color: var(--colors-blue);
+    position: absolute;
+    bottom: -1lh;
+    opacity: 0;
+    transition:
+      opacity 150ms ease-out,
+      bottom 150ms ease-out,
+      background-color 200ms var(--nq-ease);
+  }
+
+  :where(.nq-hoverable, [nq-hoverable]):where(:hover, :focus-visible) &::after {
+    background-color: var(--colors-white);
+    opacity: 1;
+    bottom: 0;
+  }
+}
+
+.nq-hide-scrollbar,
+.nq-scrollbar-hide {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.nq-scrollbar {
+  &::-webkit-scrollbar {
+    width: 0.8rem;
+    height: 0.8rem;
+    margin: 2px;
+    scrollbar-gutter: stable;
+
+    @media screen and (min-width: 769px) {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 0.4rem;
+    background-color: var(--nq-thumb);
+    background-clip: padding-box;
+    border: 2px transparent solid;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--nq-track);
+  }
+
+  &.nq-scroll-sm::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  &.nq-scroll-sm::-webkit-scrollbar-thum {
+    border-radius: 0.25rem;
+  }
+}
+
+.nq-scrollbar-sm {
+  &::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+    margin: 2px;
+    scrollbar-gutter: stable;
+
+    @media screen and (min-width: 769px) {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 0.25rem;
+    background-color: var(--nq-thumb);
+    background-clip: padding-box;
+    border: 2px transparent solid;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--nq-track);
+  }
+
+  &.nq-scroll-sm::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+  &.nq-scroll-sm::-webkit-scrollbar-thum {
+    border-radius: 0.25rem;
+  }
+}