/* The category belt (views/common/includes/filters), the one component under the header of every page, the templates
   page's included: FilterableUtils.putFiltersHtmlInSpark renders it for each request, on a library page with the picked
   categories first and selected. Centred while it fits, the auto margins give way to scrolling from the first item once
   it does not. Needs the --yx-* tokens of account-menu.css. The buttons keep main.css's .filters-category-button class
   for the icons' own CSS, so its library bar rules are overridden here, its !important ones included (main.css never
   loads on a v2 page, the overrides are harmless there) */
.yx-catbelt-wrap{position:relative;z-index:1}
/* base.css smooths the v2 pages' text, main.css does not, so the same weight rendered heavier on the Shards pages */
.yx-catbelt{display:flex;gap:6px;overflow-x:auto;padding:8px var(--yx-gutter) 14px;scrollbar-width:none;position:relative;z-index:1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.yx-catbelt::-webkit-scrollbar{display:none}
/* of-type, not child: each category's icon css is a <style> next to its link, so the last child is never a link */
.yx-catbelt > a:first-of-type{margin-left:auto}
.yx-catbelt > a:last-of-type{margin-right:auto}
.yx-catbelt .filters-category-button{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;width:118px !important;min-width:0 !important;max-width:none !important;
  padding:18px 10px 14px;border-radius:14px;font-size:12.5px;font-weight:600;color:#505050 !important;text-align:center;line-height:1.25;text-decoration:none;
  background:none !important;box-shadow:none;transition:background-color .2s var(--yx-ease),transform .25s var(--yx-ease),color .2s}
.yx-catbelt .filters-category-button:hover{background:#fff !important;color:#121212 !important;transform:translateY(-2px)}
.yx-catbelt .filters-category-button.selected{background:var(--yx-card) !important;color:#121212 !important}
.yx-catbelt .filters-category-button .name{font-size:inherit;font-weight:inherit;color:inherit !important;min-height:0;display:block}
/* The icon wrapper keeps main.css's .icon class for the icons' own CSS. base.css styles .icon as the tiles' icon box
   (size, background, currentColor strokes), so the belt sets its own box and leaves the svg to its iconCss */
.yx-catbelt .cat-ic{display:block;width:34px;height:34px;font-size:34px;border-radius:0;background:none;color:inherit;transition:transform .3s var(--yx-ease)}
.yx-catbelt .cat-ic svg{display:block;width:34px;height:34px;stroke:none;fill:initial;stroke-width:initial}
/* The two-layer icons of the library bar, as main.css drew them: the fill layer waits, the stroke layer is grey until picked */
.yx-catbelt .icon .icon-fill{opacity:0;transition:opacity .3s ease}
.yx-catbelt .icon .icon-stroke{stroke:#929292;transition:stroke .3s ease,opacity .3s ease}
.yx-catbelt .selected .icon .icon-stroke{stroke:var(--yx-brand)}
.yx-catbelt .filters-category-button:hover .cat-ic{transform:scale(1.06)}
/* The design's line icon for a category without one of its own, and the reset */
.yx-catbelt .cat-ic--line svg{stroke:#929292;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s var(--yx-ease)}
.yx-catbelt .filters-category-button:hover .cat-ic--line svg,.yx-catbelt .filters-category-button.selected .cat-ic--line svg{stroke:var(--yx-brand)}
/* When they don't fit the belt scrolls: by touch and trackpad natively, by dragging with the mouse, and with the arrows,
   shown only on the side that has more (javascripts/common/topnav.js). The edge fades on that side the same way */
.yx-catbelt-wrap.more-l .yx-catbelt{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px);mask-image:linear-gradient(90deg,transparent,#000 72px)}
.yx-catbelt-wrap.more-r .yx-catbelt{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
.yx-catbelt-wrap.more-l.more-r .yx-catbelt{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent)}
.yx-catbelt.dragging{cursor:grabbing;scroll-behavior:auto}
.yx-catbelt.dragging a{pointer-events:none}
.yx-catbelt-arrow{position:absolute;top:50%;z-index:2;width:38px;height:38px;margin-top:-22px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--yx-surface);box-shadow:0 1px 3px rgba(18,18,18,.06),0 0 0 1px var(--yx-line);display:grid;place-items:center;transition:background-color .2s var(--yx-ease),transform .2s var(--yx-ease)}
.yx-catbelt-arrow::before{content:"";width:8px;height:8px;border-right:2px solid var(--yx-text);border-bottom:2px solid var(--yx-text);transform:rotate(-45deg);margin-left:-3px}
.yx-catbelt-arrow.prev{left:calc(var(--yx-gutter) - 8px)}
.yx-catbelt-arrow.prev::before{transform:rotate(135deg);margin-left:3px}
.yx-catbelt-arrow.next{right:calc(var(--yx-gutter) - 8px)}
.yx-catbelt-arrow:hover{background:var(--yx-card)}
.yx-catbelt-arrow:active{transform:scale(.94)}
.yx-catbelt-arrow[hidden]{display:none}
@media (hover:none),(pointer:coarse){.yx-catbelt-arrow{display:none}}