/* =====================================================================================================
 * File: scrollbar.css ("/css/pages/index/scrollbar.css")
 * Project: CrownPreRoll-Web
 * Purpose: Styles for the landing page scrollbar.
 * Dependencies:
 *    - token.css ("/css/token.css")
 *
 * Key Behaviors:
 *    - Badges: Icon + Label
 *    - Scrolling: Handled by scrollbar.js ("/js/sections/index/scrollbar.js")
 *
 * Selector Index:
 *    .scrollbar          // Section Container
 *    .scrollbar-inner    // Content Container
 *    .badge              // Content
 *    .icon               // Content Icon
 *    .label              // Content Label
 *
 * HTML Pseudo-Code:
 *    <section class="scrollbar">
 *      <ul class="scrollbar-inner">
 *        <li class="badge">
 *          <svg class="icon">
 *            <use>…</use>
 *          </svg>
 *          <span class="label">…</span>
 *        </li>
 *      </ul>
 *    </section>
 *
 * Last Updated: 11/15/2025 - v0.0.3-beta
======================================================================================================== */
:root {
  /* ########## Spacing ########## */
  /* Containers */
  --scrollbar-pad: 0.25rem 0;
  --scrollbar-inner-gap: 125px;
  /* Badge */
  --badge-gap: 0.5rem;
  /* ########## Typography ########## */
  /* Label */
  --label-font-color: var(--crown-black);
  --label-font-size: 16px;
  --label-font-wt: 500;
  --label-font-lh: 1;
  --label-font-ls: 1px;
  /* ########## Design ########## */
  /* Containers */
  --scrollbar-bg-color: var(--crown-white);
  /* Icon */
  --icon-size: 18px;
  --icon-stroke-w: 1.5;
}

/* Containers */
.scrollbar {
  padding: var(--scrollbar-pad);
  overflow: hidden;
  background: var(--scrollbar-bg-color);
}
.scrollbar-inner {
  display: flex;
  gap: var(--scrollbar-inner-gap);
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Badges */
.badge {
  display: flex;
  gap: var(--badge-gap);
  align-items: center;
  white-space: nowrap;
}
.label {
  user-select: none;
  color: var(--label-font-color);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-wt);
  line-height: var(--label-font-lh);
  letter-spacing: var(--label-font-ls);
}
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-w);
  stroke-linecap: round;
  stroke-linejoin: round;
}