.hp{--hp-tile-radius:14px;--hp-mat-size:81%;--hp-mat-radius:10px;--hp-sock-r:8px;--hp-plug-size:15px;--hp-olw:2px;--hp-outline:inset 0 0 0 2px var(--ds-color-warm)}.hp--venue{--hp-frame:var(--ds-color-secondary);--hp-mat:var(--ds-color-primary)}.hp--artist{--hp-frame:var(--ds-color-accent);--hp-mat:var(--ds-color-secondary)}.hp--community{--hp-frame:var(--ds-color-primary);--hp-mat:var(--ds-color-primary-dark)}.hp-glyph{flex-shrink:0;position:relative}.hp-glyph:before{content:"";border-radius:var(--hp-tile-radius);background:var(--hp-frame);position:absolute;inset:0}.hp-glyph--sock:before{-webkit-mask:radial-gradient(circle var(--hp-sock-r) at 100% 50%, transparent calc(var(--hp-sock-r) - 1px), #000 var(--hp-sock-r));-webkit-mask:radial-gradient(circle var(--hp-sock-r) at 100% 50%, transparent calc(var(--hp-sock-r) - 1px), #000 var(--hp-sock-r));mask:radial-gradient(circle var(--hp-sock-r) at 100% 50%, transparent calc(var(--hp-sock-r) - 1px), #000 var(--hp-sock-r))}.hp-glyph__mat{width:var(--hp-mat-size);height:var(--hp-mat-size);border-radius:var(--hp-mat-radius);background:var(--hp-mat);color:var(--ds-text-inverse);z-index:2;box-shadow:var(--hp-outline);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.hp-glyph__plug{top:50%;left:calc(var(--hp-plug-size) / -2);width:var(--hp-plug-size);height:var(--hp-plug-size);background:var(--hp-frame);z-index:1;border-radius:50%;position:absolute;transform:translateY(-50%)}.hp-pill{isolation:isolate;height:36px;color:var(--ds-text-muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;padding:0 15px;display:flex;position:relative}.hp-pill:before{content:"";border-radius:var(--hp-tile-radius);background:var(--hp-pb,var(--ds-surface-card));z-index:-1;position:absolute;inset:0}.hp-pill:after{content:"";border-radius:var(--hp-tile-radius);box-shadow:inset 0 0 0 1px var(--ds-border);z-index:-3;pointer-events:none;background:0 0;position:absolute;inset:0}.hp-pill--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.hp-pill--on{color:var(--ds-text-inverse);--hp-pb:var(--hp-frame)}.hp-pill--on:after{box-shadow:var(--hp-outline)}.hp-pill--on.hp--artist{color:var(--ds-color-secondary)}.hp-pill--sock{padding-right:22px}.hp-pill--sock:before,.hp-pill--sock:after{-webkit-mask:radial-gradient(circle var(--hp-sock-r) at 100% 50%, transparent calc(var(--hp-sock-r) - .5px), #000 var(--hp-sock-r));-webkit-mask:radial-gradient(circle var(--hp-sock-r) at 100% 50%, transparent calc(var(--hp-sock-r) - .5px), #000 var(--hp-sock-r));mask:radial-gradient(circle var(--hp-sock-r) at 100% 50%, transparent calc(var(--hp-sock-r) - .5px), #000 var(--hp-sock-r))}.hp-pill--plug{padding-left:calc(15px + var(--hp-plug-size) / 2);margin-left:calc(var(--hp-plug-size) / -2)}.hp-pill__ko,.hp-pill__kf{pointer-events:none;border-radius:50%;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}.hp-pill__ko{width:calc(var(--hp-plug-size) - 1px);height:calc(var(--hp-plug-size) - 1px);background:var(--ds-color-warm);z-index:-4}.hp-pill__kf{width:calc(var(--hp-plug-size) - 2 * var(--hp-olw));height:calc(var(--hp-plug-size) - 2 * var(--hp-olw));background:var(--hp-pb,var(--ds-surface-card));z-index:-1}.hp-pill--on .hp-pill__kf{background:var(--hp-frame)}.hp-pill__lo{border-radius:calc(var(--hp-tile-radius) + 1px);background:var(--ds-color-warm);z-index:-2;pointer-events:none;position:absolute;inset:-1px}