.root {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding-left: 4px;
  border-radius: 14.4px;
  background: var(--alinea-background);
  box-shadow: var(--alinea-fields-shadow);
  color: var(--alinea-foreground);
  font-size: 11px;

  &-icon {
    margin-left: 4px;
  }

  &-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 8px 3px 4px;
  }

  &.is-accent {
    background: var(--alinea-accent);
    color: var(--alinea-accent-foreground);
  }

  &.is-disabled {
    color: var(--alinea-variant-disabled-foreground);
    background: var(--alinea-variant-disabled-background);
  }

  &.is-info {
    color: var(--alinea-variant-info-foreground);
    background: var(--alinea-variant-info-background);
  }

  &.is-success {
    color: var(--alinea-variant-success-foreground);
    background: var(--alinea-variant-success-background);
  }

  &.is-progress {
    color: var(--alinea-variant-progress-foreground);
    background: var(--alinea-variant-progress-background);
  }
}
