.transit-chip{min-width:36px;height:36px;background:var(--route-color);color:var(--text-color);font-family:var(--font-default);font-weight:900;place-content:center;text-align:center;background-size:contain;cursor:pointer;box-shadow:0 5px #0000001a;.transit-chip__text{display:block;width:calc(100% - 4px);height:calc(100% - 4px);font-size:18px;place-content:center;margin:2px}&[data-mode=Bike]{border-radius:12px;min-width:unset;width:24px;height:24px;background:#3980c4;color:var(--color-white);place-content:center;.transit-chip__text{display:none}&:after{content:"";display:block;font:var(--fa-font-solid);width:100%;height:100%;font-size:12px;line-height:24px}}&[data-mode=Bus]{border-radius:18px;background:var(--route-color);color:var(--text-color);.transit-chip__text{border:2px solid currentColor;border-radius:16px;padding-inline:10px}}&[data-mode=Metro]{border-radius:5px;.transit-chip__text{border-radius:3px}}&[data-agency=PATCO]{width:auto;.transit-chip__text{border:none;padding-inline:5px}}&[data-agency="Philly Phlash"]{width:auto;border-radius:20px}&[data-mode=Rail]{border-radius:5px;width:48px}}.transit-chip:hover{z-index:2}.transit-chip.is-dimmed{--factor: .8;filter:invert(calc(var(--factor) / 2)) brightness(calc(1 + var(--factor)))}.transit-chip:not(.is-dimmed){z-index:1}