/* =========================================================
   AB Pills Component
   Horizontal scroll with peek support
   ========================================================= */

.ab-pill-wrapper {
    width: 100%;
}

/* Title */
.ab-pill-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* =========================
   Viewport
   ========================= */

.ab-pill-viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar (optional) */
    scrollbar-width: none;
}

.ab-pill-viewport::-webkit-scrollbar {
    display: none;
}

/* =========================
   Row (scroll container)
   ========================= */

.ab-pill-row {
    display: flex;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-left: 0;
    padding-right: calc(16px + var(--ab-peek, 0px));
}

/* =========================
   Individual Pill
   ========================= */

.ab-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 48px;
    padding: 0 16px;

    border: 1px solid #111;
    border-radius: 9999px;
    background: #fff;
    color: #111;
    text-decoration: none;

    transition: all 0.25s ease;

    scroll-snap-align: start;
}

/* Hover */
.ab-pill:hover {
    background: #111;
    color: #fff;
}

/* =========================
   Icon Handling
   ========================= */

.ab-pill__icon {
    display: flex;
    align-items: center;
}

.ab-pill__icon img {
    display: block;
    max-width: 24px;
    height: auto;
}

/* =========================
   Text
   ========================= */

.ab-pill__text {
    white-space: nowrap;
    font-size: 0.95rem;
}