@layer components{.c-check-pill{--pill-color:var(--brand-navy);--pill-color-active:var(--brand-navy);--pill-background:transparent;--pill-background-active:rgba(66,143,236,.2);--pill-border-color:var(--brand-blue);--pill-border-color-active:transparent;--pill-check-opacity:0;--pill-total-x-padding:35px;--pill-minimum-x-padding:10px;background-color:var(--pill-background);border:1px solid var(--pill-border-color);border-radius:100px;box-shadow:0 5px 10px transparent;color:var(--pill-color);font-size:15px;font-weight:var(--font-weight-medium);line-height:1;padding:8px calc(var(--pill-total-x-padding)/2);position:relative;transition:.15s ease;transition-property:color,background-color,padding,transform,box-shadow}.c-check-pill:before{background-color:var(--pill-color-active);content:"";height:calc(var(--pill-minimum-x-padding)*1.2);inset:50% auto auto var(--pill-minimum-x-padding);-webkit-mask-image:url(../../../img/icons/check.svg);mask-image:url(../../../img/icons/check.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;opacity:var(--pill-check-opacity);position:absolute;transform:translateY(-50%);width:calc(var(--pill-minimum-x-padding)*1.2)}.c-check-pill:has(.c-check-pill__checkbox:checked){--pill-check-opacity:1;background-color:var(--pill-background-active);border-color:var(--pill-border-color-active);color:var(--pill-color-active);padding-left:calc(var(--pill-total-x-padding) - var(--pill-minimum-x-padding));padding-right:var(--pill-minimum-x-padding)}body.is-tabbing .c-check-pill:has(.c-check-pill__checkbox:focus){outline:2px solid var(--pill-color);outline-offset:2px}.c-check-pill__checkbox{height:100%;inset:0;opacity:0;position:absolute;width:100%}.c-check-pill:focus-within,.c-check-pill:hover{transform:scale(1.02)}.c-check-pill__checkbox:hover{cursor:pointer}}