@keyframes focus-shadow-pulse-inset {
  0% {
    box-shadow: inset 0 0 0 3px rgba( 0, 120, 212 ,  0.35 );
    box-shadow: inset 0 0 0 3px rgba( var(--palette-primary,0, 120, 212) ,  0.35 ); }
  50% {
    box-shadow: inset 0 0 0 3px rgba( 0, 120, 212 ,  0.15 );
    box-shadow: inset 0 0 0 3px rgba( var(--palette-primary,0, 120, 212) ,  0.15 ); }
  100% {
    box-shadow: inset 0 0 0 3px rgba( 0, 120, 212 ,  0.35 );
    box-shadow: inset 0 0 0 3px rgba( var(--palette-primary,0, 120, 212) ,  0.35 ); } }

/**
 * Browser specific mixin's
 */
/* 
    We're using absolute height and negative margins in this file
    this is because borders make a lot of this logic weird, and the spec calls for overlap of borders
    between what are logically parent and child elements
    
    eg. in Outlined pills, the button focus circle should exactly overlap the pill's outline

    Using negative margin means we need to do less padding management of the container based on
    what elements it happens to contain, and elements can just intrude on the left-right padding of the parent
    */
.bolt-pill {
  align-items: center;
  border-radius: 120px; }
  .bolt-pill:focus {
    outline: none; }
  .bolt-pill.clickable {
    cursor: pointer; }
  .bolt-pill:not(.clickable) {
    cursor: default; }
  .bolt-pill.count .bolt-pill-content {
    font-weight: 600; }
  .bolt-pill.compact {
    padding: 2px 8px;
    height: 20px; }
    .bolt-pill.compact .bolt-pill-content {
      font-size: 12px; }
  .bolt-pill.regular {
    padding: 4px 12px;
    height: 24px; }
    .bolt-pill.regular .bolt-pill-content {
      font-size: 12px; }
    .bolt-pill.regular .bolt-pill-icon {
      margin-left: -4px;
      margin-right: 6px; }
    .bolt-pill.regular .bolt-pill-filled-visual {
      width: 20px;
      height: 20px;
      margin-left: -10px; }
    .bolt-pill.regular .bolt-pill-button {
      margin-right: -12px; }
  .bolt-pill.large {
    padding: 6px 12px;
    height: 32px; }
    .bolt-pill.large .bolt-pill-content {
      font-size: 14px; }
    .bolt-pill.large .bolt-pill-icon {
      margin-left: -4px;
      margin-right: 10px; }
    .bolt-pill.large .bolt-pill-filled-visual {
      width: 24px;
      height: 24px;
      margin-left: -8px; }
    .bolt-pill.large .bolt-pill-button {
      margin-right: -8px; }
  .bolt-pill.standard {
    background-color: rgba(0, 0, 0, 0.06);
    background-color: var(--palette-black-alpha-6,rgba(0, 0, 0, 0.06)); }
    .bolt-pill.standard.clickable.hover {
      background-color: rgba(0, 0, 0, 0.10);
      background-color: var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10)); }
  .bolt-pill.outlined {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.20);
    border: 1px solid var(--palette-black-alpha-20,rgba(0, 0, 0, 0.20)); }
    .bolt-pill.outlined.clickable.hover {
      background-color: rgba(0, 0, 0, 0.06);
      background-color: var(--palette-black-alpha-6,rgba(0, 0, 0, 0.06)); }
    .bolt-pill.outlined.compact {
      padding: 1px 7px; }
    .bolt-pill.outlined.regular {
      padding: 3px 11px; }
    .bolt-pill.outlined.large {
      padding: 5px 11px; }
    .bolt-pill.outlined .bolt-pill-button {
      border: 1px solid transparent; }
  .bolt-pill.colored.dark {
    color: white; }
  .bolt-pill.colored.light {
    color: black; }

.bolt-pill-content {
  overflow: hidden; }
  .bolt-pill-content:not(:last-child) {
    margin-right: 6px; }

.bolt-focus-visible .bolt-pill:focus {
  border: 1px solid rgba(0, 120, 212, 1);
  border: 1px solid var(--communication-background,rgba(0, 120, 212, 1));
  animation: ms-focus-shadow-pulse 4s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.35);
  box-shadow: 0 0 0 3px var(--focus-pulse-max-color,rgba(0, 120, 212, 0.35)); }
  @media screen and (-ms-high-contrast: active) {
    .bolt-focus-visible .bolt-pill:focus {
      animation: none; } }
  .bolt-focus-visible .bolt-pill:focus.compact {
    padding: 1px 7px; }
  .bolt-focus-visible .bolt-pill:focus.regular {
    padding: 3px 11px; }
  .bolt-focus-visible .bolt-pill:focus.large {
    padding: 5px 11px; }

.bolt-pill-icon {
  font-size: 16px; }

.bolt-pill-filled-visual {
  overflow: hidden;
  border-radius: 50%;
  margin-right: 6px; }

button.bolt-pill-button.bolt-button.icon-only {
  font-size: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0px;
  color: inherit; }
  button.bolt-pill-button.bolt-button.icon-only:hover {
    background-color: rgba(0, 0, 0, 0.06);
    background-color: var(--palette-black-alpha-6,rgba(0, 0, 0, 0.06)); }